スマホのホームページを自サイトに変更

最初はデフォルトの「auポータル」を表示していたのですが、あまりに動画CMが頻繁に表示され、邪魔なのと、au最低の「データ定額1Gプラン」ではすぐに使いきりそうなので、自サイトにホームページを変更しました。
Chromeのホームページの変更は、右上の設定（縦3点）ボタンから、設定＞ホームページ＞URLといって、URLを手動で変更します。少々めんどうですが、これで変更できます。

モバイルフレンドリー

昨年、自分のサイトのスマホページ（モバイルフレンドリー）対応を行いましたが、今回スマホを買って、改めて見て見ると、文字の大きさとか検索ボックスの大きさ、ニュースの内容等が大分気になりました。他のサイトに較べて、総じて文字が小さいので、まずはそれを大きめに修正しました。
ページの「モバイルフレンドリー」のチェックは、Googleの専用サイトでもテストできます。

スマホのCSS
修正には、社内のWi-Fiを使っています。1ＧプランのＬＴＥではすぐに使い切ってしまうからです。
自サイトの天気予報がかなり充実しました。PC用のページに、時系列予報を追加したので、それをスマホにも反映させました。
しかし、元が画像のため、スマホには大きすぎるので、スライダーを付けて表示させることにしました。

スライダーといってもjavascriptではなく、通常のcssで、
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
を指定するだけです。
これにより、タッチ操作で、画像がスライドします。PCのブラウザでは、スクロールバーが表示されます。

スマホ（Android）とiphoneでは文字サイズが違って表示されることがあります。
文字サイズがおかしくなるとき、
-webkit-text-size-adjust:100%;
を入れておくといいようです。

ページの縮小、拡大を定義します。
指定の仕方によっては、表示が不安定になるので、注意が必要です。
meta name=”viewport”
content=”width=device-width,
user-scalable=yes, minimum-scale=1.0,
maximum-scale=1.5

　
　

 共有元ページ