無料ブログ「rentafree.net」の管理人ブログ

viewportつけました

モバイル機器対応のため、HTMLに
<meta name="viewport">
をつけることを以前から検討していましたが、
CSSの@viewportで一括設定したいと思い今までつけていませんでしたが、
AndroidのChromeとFirefoxでブログエディターのフル機能が使えそうになったのと、
別ファイルのCSSだとページロード時に最初からviewportが適用されない可能性もあり、
<meta>で設定する利点もあるとの判断で、
CSSの@viewportはChromeとFirefoxにいつ実装されるのかわからないので。
公式サイトのほぼすべてのページのHTMLに、
<meta name="viewport">
をつけました。
エラーページ等、一部のページは変更していません。

今回の変更により、画面サイズの小さいタブレットやスマートフォンで当サービスのページを表示した際に、
自動縮小表示にならずに画面サイズにフィットします。
手動でのズームは無効化していませんので可能です。

一括置換を行い、全てのページでの確認は行なっていませんので、
万が一今回の修正で問題が生じるようになった箇所に気づきましたら、報告していただけると助かります。


Android版Firefoxについては、
バージョン17で旧版ブログエディターとなり、旧版ブログエディターのフル機能が利用できると思いましたが、
こちらのブラウザテスト時のミスだったようで、やっぱ新版ブログエディターとなります。
Android版Firefoxでは、新版ブログエディターで拡張コンテキストメニューとレンジ操作が行えないためフル機能が利用できません。

Android版ChromeはPC版Chromeと同じで旧版ブログエディターとなりますが、
旧版ブログエディターのフル機能が利用できると思います。
Android版ChromeはAndroid 4.0以降?からインストールでき、4.1以降では標準搭載されていると思われます。
4.1以前では「ブラウザ」というWebkitブラウザが標準搭載されていますが、
旧Androidブラウザではcontenteditableにバグがあるようで日本語入力ができないと思われます。

現状Androidで当サービスを使う場合は、Chromeが最適だと思います。
ブラウザ別動作の詳細は対応ブラウザに記載してあります。