More than 5 years have passed since last update.

PC用のページをそのままスマホで表示する

Posted at 2015-06-10

レスポンシブに対応するのではなく、PC用にコーディングしたソースをそのまま綺麗にスマホでも見れるようにする方法。

viewport設定

何も指定しないと、初期値は980pxだが、横にはみ出た状態になってしまう。

<meta name="viewport" content="width=1200">

上記のように、コンテンツ幅を指定する。(ex.1200px)
これで横幅いっぱいに表示される。

CSSで指定したサイズとは違うサイズで表示されてしまう場合。

文字サイズの自動調整が効いているかららしい。

body {
  -webkit-text-size-adjust: 100%;
}

上記のように、文字サイズの自動調整をさせたくない部分に指定する。

metaにinitial-scaleを指定しなかったり、content属性の「width」が「width=1200」のような数字になっている場合に起きるらしい。(Android版Chrome固有のバグ？)

h1{
  max-height: 100%; 
}

上記のように、文字が大きくなってしまう要素に指定する。