+Webサイト制作
携帯サイトをiPhone/Androidのスクリーンで見やすくする
所有している携帯サイトをスマートフォン（Android、iPhone）の画面横幅に合わせて表示したいときに、有効な改善方法は次の通り。
横幅を合わせたい携帯サイトのページまたはテンプレートの<head>から</head>の間に、
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
を挿入する。
具体例としては、次のような感じだ。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>無題ドキュメント</title>
</head>
こうすれば、携帯サイトがスマートフォンの横幅に自動的に調整される。若干、携帯サイトの横幅よりもワイドに表示されてしまうが、追加でCSSを書き入れることで携帯サイトの横幅に合わせることが可能。しかし、アフィリエイト等で、携帯とスマートフォンを自動的に認識して表示される広告タグを貼っている場合等は、単に、スマートフォンの横幅に合わせるだけでも良いかもしれない。
参考･PC専用URL
|
携帯･スマホからアクセス |
携帯から芸能人や有名人のブログの最新トピックス、動画をリアルタイムでチェックできるポータルサイト！記事のサイトへアクセス！
koichiro公式サイト
