WEBページをiOSでA4サイズ印刷する方法について

前提・実現したいこと

Ionic4とAngular8でレスポンシブル対応のWEBページを作っています。
その際にページ（画面）のうちの1つをPCでもスマホでもA4サイズで印刷できるように実装したいのですが、iOSでの印刷・PDF出力のレイアウトが期待通りにならず困っています。

発生している問題・エラーメッセージ

iOSのSafariで該当画面を開いた際にはスマホ表示となります。ここまでは確認できています。
そのままSafariの共有ボタンから「プリント」もしくは「ブック（PDFとして保存）」を押すとPC表示と同じA4サイズ（＝PC表示）の出力をおこないたいのですが、レイアウトが崩れます。

具体的にはA4サイズ（＝PC表示）出力されているように見えますが、印刷プレビューでは左上部分だけが描画されており、右側と下部が見切れております。

AndroidのChromeでは期待通り印刷の時だけA4サイズ（＝PC表示）出力されております。

該当のソースコード

A4サイズは下記のようにmm指定でおこなっております。

css
1width: 189mm;
2height: 277mm;
3margin: 0 auto;
4padding-top: 30px;
5

下記の通りスマホ用のメディアクエリを記述していますが、印刷時にはPC表示のままとする為にprintは記述していません。

css
1@media screen and (max-width: 767px) {
2こちらで画面表示のレイアウトを指定しています。
3}

index.htmlのviewport設定が関係しているのでしょうか。

html
1<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

試したこと

印刷状態のレイアウトを確認する為にChromeの開発者ツールからスマホ表示（例.iPhoneX）にしてEmulate CSS media typeのprintを見てみました。
印刷はA4表示としたいのでスマホ表示（例.iPhoneX）では「A4サイズの一部」が見えている状態です。これは妥当な表示だと思います。
ところが実際にiOS実機で印刷プレビューを見ると前述の「A4サイズの一部」しか印字されません。右側と下部は余白だけとなります。

MacのSafariにてWebインスペクタをしながらCSSを見てみてもどのスタイルが影響しているのかわかりかねる状態です。

もし何かお分かりの方がいましたらご教授いただけると幸いです。

よろしくお願いします。

thyda.eiqau

2020/02/07 18:13

PC・スマートフォンでそれぞれページを画面上で閲覧するときは、それぞれのウィンドウ・デバイスにフィットしたサイズで表示したくて、印刷するときはA4にフィットするようにしたいという意味ですか？ご提示の次のCSS width: 189mm; height: 277mm; margin: 0 auto; padding-top: 30px; をどのように実装しているのか（たとえば、body { ... } に入れているとか）がわかるように、その外側の行もあわせてご提示ください。

t-tomo

2020/02/09 14:40

コメントいただきありがとうございます！はい、まさに下記の通りです。「PC・スマートフォンでそれぞれページを画面上で閲覧するときは、それぞれのウィンドウ・デバイスにフィットしたサイズで表示したくて、印刷するときはA4にフィットするようにしたい」こちらionicのフレームワークを使用しているため、該当のスタイルを当てている要素もいくらか深い階層にございます。影響しているかもしれないと判断する要素とスタイルだけを抽出して記載いたします。内容を見ていただけますと幸いです。 <body> <app-original> <ion-content> <div>A4で表示したい箇所</div> </ion-content> </app-original> </body> body{ -webkit-font-smoothing: antialiased; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; position: fixed; width: 100%; max-width: 100%; height: 100%; max-height: 100%; text-rendering: optimizeLegibility; overflow: hidden; touch-action: manipulation; -webkit-user-drag: none; word-wrap: break-word; overscroll-behavior-y: none; text-size-adjust: none; } app-original{ left: 0; right: 0; top: 0; bottom: 0; display: flex; position: absolute; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: justify; justify-content: space-between; contain: layout size style; overflow: hidden; z-index: 0; } ion-content{ --offset-top: 0px; --offset-bottom: 0px; } div{ width: 189mm; height: 277mm; margin: 0 auto; padding-top: 30px; } 色やフォントなどのCSSを除いて上記の通り記載いたしました。恐れ入りますが、よろしくお願いいたします。