タグ:viewport

target-densitydpi=device-dpiに注意【viewport】

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 設定3パターンだ - てっく煮ブログ

nandani | 2013年06月17日 | コメント(0) | トラックバック(1) | HTML関連 | SNS関連

Copyright(c) 2010 - 2024 ダリの雑記