アップル社からiPadがローンチされて以来すっかりタブレットは市民権を得た感があります。 従って今でもiPadはタブレットの代表として世の中に認知される所となっていると言って過言ではないでしょう。 PCよりお手軽に起動出来、ソファに腰掛けて利用可能ながら、 スマートフォンより表示領域が大きいタブレットは、 電子書籍閲覧や、動画サイト閲覧などに威力を発揮しますが、 矢張りWebサイト閲覧は其れ等の中でも最も利用頻度の高いものでしょう。 iPadでは標準装備のWebブラウザ Safari が大いに用いられる処です。
レスポンシブWebデザインとiPad
さて現在Webサイト実装の主流として台頭して来ている手法が レスポンシブWebデザイン です。 昔風に言えばリキッドデザインと言えば通りが良いかも知れません。 リキッドデザインが現代風に進化して一つのHTMLファイルで 様々な表示領域の端末に対応可能としたのがレスポンシブWebデザインで、 一般に「レスポンシブ」と言えば其れを指す程普及した様に思います。
処で此のレスポンシブWebデザインをタブレットの代表格たるiPadで表示すると多くの場合、 表示崩れなど問題が生じる様です。 共に現在の主流たる手法と端末が相性が悪いのは由々しき事態です。 願わくばW3Cなど規格制定組織やアップル社など大企業の対応が進み 何の考えもなく問題なく表示されるのが最も宜しい解決法でしょうが、 現時点ではどうも其の様な方向に進んではいないらしいので、 どうしてもWebサイト制作側で其々対応が必要となります。 折角の表示領域の広いiPadであれば是非情報の一覧性の優れたPC版の表示を求めたく、 本記事ではiPadでレスポンシブWebデザインの表示崩れを防ぎPC版の表示を目論見ます。
metaタグviewport属性
「iPad レスポンシブ」などでネット検索すれば多く関連情報ページがヒットしますが どうやら表示崩れの原因はWebサイトのheadタグ内に記述するmetaタグの viewport 属性に有る様です。 情報ページの一つにはWebサイト ジユウメモメモ に2016年4月9日に配信された以下リンク先記事があります。
レスポンシブWebデザインでiPad向けにPC表示を見せるときの注意点
上記情報ページに依れば表示崩れは iPadの幅、即ち768pxを超える範囲の背景色の設定が反映されない処が大きく 問題はviewportに有ると踏んでいます。 以下の如くheadタグ内に記述したviewport設定が悪戯をしていると言う判断です。
<meta name=viewport content="width=device-width, initial-scale=1">其の解決にはiPadに於いてはviewport属性のmetaタグ事態を記述しない方法が採られています。 また、一つには KOTORI ブログに2014年2月27日に配信された以下記事が有ります。
iPadやiPhoneでサイトの右側が切れる、余白ができる場合の対処法
此方も原因をviewport設定に求めていますが、 解決法は三段階を踏んで説明されています。
<meta name=viewport content="width=device-width">先ずは「width=device-width」を記述する様に記述されています。 余談ですが手元の環境での試行錯誤でも、 どうも「initial-scale=1」が含まれると問題が起こる様で 此れを省くのは一つの手かも知れません。
<meta name=viewport content="width=絶対値">其れでも表示が改善されない場合は、 次に上では「絶対値」としましたが此処にiPadで表示したいWebサイトの横幅を記述する様に説明されています。 960pxであれば960、1024pxであれば1024と書き、 此の際「px」は記載する必要は有りません。 手元の環境の試行錯誤では此の手法が最も効果的でした。
最後にスタイルシートに於いて、html、body要素の幅を100%とする手法が紹介され、 此れは通常は記述されないであろう値をiPadのSafariに明示的に記述すれば 問題が解決される場合もある旨、説明されています。 処で手元の環境では此の手法は残念ながら効果が有りませんでした。
JavaScriptを利用した解決法
以上から手元の環境に於いて採った解決法は viewport設定で幅を絶対値で指定する手法となります。 此処に於いてiPadでレイアウト崩れの発生するHTMLファイルのheadタグ内に 解決法たるviewportに絶対値を設定したmetaタグを記述する必要が発生しますが、 しかし問題の起こるのはiPadに於いてですので、 他端末、PCやスマホ、他タブレットなどでは此のmetaタグは必要有りません。 iPadで閲覧された場合のみ此の特別なmetaタグを表示したい要請が発生します。 閲覧端末に依ってmetaタグの出力を切り替えるのですから基本的に動的処理となります。 此の実現には2つの方法が考えられました。
一つはJavaScriptを用いた方法です。 其の際渋谷区神宮前のウェブ制作会社 ブリコルール がブログ briccolog に2016年8月9日に共有している以下の記事が参考になるでしょう。
metaのviewportの値を動的に変更するJavaScript
記事内には参考コードが供されており、 jQueryは必要ない仕様に喜ばれる向きもあるかも知れません。 コードの内容としてはユーザーエージェント及びブラウザ幅を取得し、 併せ場合分けしてviewportの設定値を書き換えるものとなっています。 今回手元の要請では唯にアクセス端末がiPadか否かでのみ判別すれば済みますので、 以下の如くコードを改変し使用してみました。 冒頭赤字の1280はサイトのPC版のデザイン幅でiPadでデバイスの幅として指定したい数値になります。
var baseW = 1280;
var ua = navigator.userAgent.toLowerCase();
var isiPad = (ua.indexOf("ipad") > -1);
function updateMetaViewport(){
var viewportContent;
var w = window.outerWidth;
if(isiPad){
viewportContent = "width="+baseW+"px";
} else {
viewportContent = "width=device-width,initial-scale=1";
}
document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent);
}
if(isiPad){
window.addEventListener("resize", updateMetaViewport, false);
window.addEventListener("orientationchange", updateMetaViewport, false);
}外部ファイル化するに viewport.js と命名した此のJavaScriptから受けるheadタグ内のHTML当該コード部分は以下です。
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/js/viewport.js"></script>上のコードを手元の環境で実行してみた処、参考記事中の 初回イベント強制発動 部分など端折った影響かも知れませんが、 実用的な時間軸では動いてくれませんでした。 ページをリロードしてみて待ちさえすれば取り敢えず思惑に沿った動きは見せるのですが、 応答時間の問題に加え充分にレイアウト崩れが防がれているとは言えない面など有り、 些か採用するには躊躇われます。 JavaScript的に調整を重ねれば問題ない処迄改善されるかも知れませんが、 基本的にJavaScriptはクライアントサイドの処理で実行はどうしてもファイルが開かれてからになりますので応答時間の問題は付きまといますし、 また時間の制約も有り採用は断念するに至りました。
PHPを利用した解決法
次に2つ目の方法としてPHPを用いた手法を試します。 理屈からいえばJavaScriptがクライアントサイドの処理であるのに対し、 PHPはサーバーサイドの処理になります。 換言すればアクセスした閲覧端末にはサーバーでPHPプログラム処理済みのHTMLコードが渡されますから、 最初からmetaタグを記述したHTMLファイルを読み込むのと同じです。 問題としてはサーバーがPHP実装であること、ファイル拡張子が.htmlではなく.phpとなることなど考えられますが、 現在どんな廉価なレンタルサーバーでもPHPの稼働しないサーバーも珍しいでしょうし、 拡張子などは.htaccessでどうにでもなるでしょう。
此の際、JavaScriptと同じく閲覧端末を取得しなければなりませんが Qiita に2017年3月7日に共有された以下の記事など参考になるかも知れません。
ユーザーエージェントが判別出来れば後は適宜echo文などで応じたmetaタグを出力するだけです。 手元の環境で実際に稼働したPHPコードは以下になります。
if ( is_null($ua) ) {
$ua = $_SERVER['HTTP_USER_AGENT'];
}
if ( preg_match('/iPad/', $ua) ) {
echo '<meta name="viewport" content="width=1280">';
} else {
echo '<meta name="viewport" content="width=device-width,initial-scale=1">';
}此処でサイトのPC版の幅は1280pxでデザインされており、 赤字で示す部分の如く絶対値でコード中に記述してあります。 此れにてiPadで上手く1280pxのPC版のデザインがぴったり枠に収まってレイアウト崩れもなく表示されました。