ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

metaタグのviewportの設定にて、「target-densitydpi=device-dpi」とすると、表示する解像度がそのままデバイスの解像度となります。

スマホの横幅（短辺）のサイズが640px時代だったら、これでも特に問題なかったんですが、今や1080pxや1280pxなんて機種も登場しています（横幅がですよ！）。

この高解像度スマホの場合、問題となるのがSNSのボタン（「いいね」とか「ツイート」とか「Google +」ボタン）

これがめっちゃ小さくなります。米粒レベル。

サンプル（高解像度のスマホをお持ちの方は下記のURLにアクセスしてみてください）：
https://nandani.sakura.ne.jp/phptest/sns_button.php

これらはボタン専用コードを埋め込んでおくと、自動的に表示されるボタンため、スタイルシートによるサイズ調整ができません。

これの解決方法は「target-densitydpi= medium-dpi」にするか、「target-densitydpi」をそもそも記述しない（デフォルトがmedium-dpiだから）

もし解像度によってスタイルシートを切り替えている場合は、サイズの基準が変わりますので注意しましょう。

もしくは、width=320とする手もあります（もはや古いやり方らしいですが。）

<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

サンプル：
https://nandani.sakura.ne.jp/phptest/sns_button.php?dpi=medium

これで、幅320pxの場合のみ考えておけば良いので非常に楽です。

欠点としては、タブレットで見たとき、やたら文字や画像が大きく感じてしまいます。（どんな解像度でも320pxの画面を引き延ばして表示するようなものだから。）

やっぱりこれからはレスポンシブ・ウェブデザインしかないのかな～。

参考サイト

htmlをiPhoneに対応させる

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ