無料ブログ「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が最適だと思います。
ブラウザ別動作の詳細は対応ブラウザに記載してあります。

Android版 Firefox 17 がリリースされていました

Android版 Firefox 17 がリリースされていました。

テストしてみましたが、
以前のバージョンではoncontextmenuイベントが<a>又は<input>以外では発生せず、
contenteditableな<div>上では発生しませんでしたが、
どこでも長押しで発生するようになっていました。

ただ、Firefoxは<command>(現状は<menuitem>を利用)が有効と判別されるため新エディターとなるが、
<command>(現状は<menuitem>を利用)は機能しないので新エディターの拡張コンテキストメニューが利用できない。
と思ったんですが、
<command>と<menuitem>はきちんと無効になっていたんで、判別が旧エディターとなります。


Android版Chromeと同じで、
タッチパネルでは操作が難しいですが、
旧エディターのフル機能が利用できそうです。

ブラウザ対応表を、
入力可能 → 対応
に変更します。


*修正
やっぱ、FirefoxはAndroid版でも新エディターになります。
コンテキストメニューの拡張ができないので、一部操作が非対応です。