質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

印刷

印刷とは、インキを用いて紙などの被印刷物に機械的に複製することを指します。現在は紙などの2次元の媒体だけでなく、3次元の曲面にも直接印刷する技術など様々な開発が進んでいます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

2756閲覧

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

t-tomo

総合スコア5

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

印刷

印刷とは、インキを用いて紙などの被印刷物に機械的に複製することを指します。現在は紙などの2次元の媒体だけでなく、3次元の曲面にも直接印刷する技術など様々な開発が進んでいます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2020/02/03 11:35

前提・実現したいこと

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を見てみてもどのスタイルが影響しているのかわかりかねる状態です。

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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を除いて上記の通り記載いたしました。 恐れ入りますが、よろしくお願いいたします。
guest

回答1

0

自己解決

bodyのスタイルに含まれている

CSS

1position: fixed;

が原因でした。

CSS

1position: static;

とすることで解決しました。

投稿2020/03/04 04:19

t-tomo

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問