スマホ

Android ブラウザーのバグ font-size:0

最新のものではないようですが、アンドロイドに実装されているブラウザー
(ChromeのPC版とは別のもののよう)で、バグを見つけました。
英語の文献ではいくつかありましたが、日本語では初かも!!

font-size:0 に反応しないというものです。
「文字サイズが勝手に変更される」というのものは以前にも忘備しました。
その現象かと思いましたが違いました。
inputタグ内の value値をブラウザー上に表示させたくないので、調整していて気づきました。
androidブラウザー以外は特に問題なく font-size:0が効きます。
android用にtext-indent:-9999px;を追記する必要があります。
ちなみにGoogle先生のヒントの中に、
replacing 0 with very small non-zero value, e.g. 0.001px ってのがありましたが、まったくダメです。

スマホ対応(iPhone特有)

スマホ対応の業務で悩んだ点がありましたので、メモ φ(..)メモメモ
PCでのシュミレータでは起こらないのですが、iPhone実機では起こる現象です。
Androidでも起こらない事象です。

コントロールしているはずの文字サイズが反映されません。

原因は、iPhoneが自動で見やすいとされるサイズに、自動調整(こちらの設定を無視して)おこなっているようです。
そこで対応。

引用:http://m.designbits.jp/13031617/
情報ありがとうございます。
-webkit-text-size-adjust: 100%; がポイントらしい
-webkit-text-size-adjust: none; だと文字の拡大ができなくなるので注意。noneでなく100%
例:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
 html {
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

Normalize.css を使うのがよさそう。

PC用とスマホ用のレイアウト切替ボタン

「現在のサイトをスマホ対応にもして欲しい」との依頼

ここは Google大明神の推奨する方法でやるしかないでしょう。
(https://developers.google.com/webmasters/smartphone-sites/details)
という事で、いわゆるレスポンシブwebです。
(あまりに古いサイトは、サイトをリニューアルした方が良い場合もあります)

その流れで、サイトのPC用レイアウトとスマホ用のレイアウトの切り替えボタンが必要になり作成しました。
「ボタンを押せばレイアウトが切り替わる」という例はいくらでも検索で見つかりますが、では、選択したレイアウトを利用してページを推移した時に選択したレイアウトは維持されるのか?と言えば細工をしないと無理です。

いろんな実装方法があると思いますが、今回は、jQueryでクッキーを操作して作成して、参照する先のCSSファイルを保持したままページの推移をしています。
こんな感じ。

ポイントは、

  • jQuery cookie の使い方
  • CSSのリンク先を記述(分岐するように)
  • 読み込むcssの中身(htmlとcssの知識)

でしょうか。
切替ボタン作成に関しての作業は、

  • jQuery を読み込ませる
  • クリックしたときのイベントを書く。CSSのリンク先を記述も
  • 読み込むcssの中身を作ってゆく

こんな感じでしょうか。私の場合は、先にスマホ用表示のレイアウトを、お客さんのサイトを見ながらCSSを書いて、ボタン作成作業で、それらをドバっとスマホ用のCSSに載せました。

残る実装作業は、
このボタンをPC用サイトでも表示するのか・しないのかなど、運用・使用上の問題をお客さんと話し合って実装(たぶんメディアクエリー使用)という流れになります。

最後に、PC用のレイアウトで、スマホ用の切り替えボタンを表示しているサイトが少ないように思うので、こんな意見を載せておきます
(私個人的には、PC用のサイトでもレイアウト切替のボタンは表示させておく方が良いのではと思っています)

http://www.elezea.com/2012/09/responsive-design-expectations/ このページのより
ここでは
「スマホで通販サイトを見て、購入前にはパソコン用のレイアウトに切り替える」「それは、スマホ用のサイトは、PC用のサイトに比べ情報量が少ないと思っているから、」というように書かれています。
どうでしょう。実は私もそんな風に思っています。本当に同じ情報なのか確かめたくなります。
ということで、スマホで見た時にレイアウト切替ボタンは必須である事は間違いありません。
上の英語の記事は、「スマホサイトにPC用にレイアウト切替ボタンはつけておく方が良いよね」という事になっています。

PCでサイトで見た時はどうでしょう。パソコンで見てスマホ用のレイアウトに切り替える人はいないかもしれませんが、
「あーレイアウトが切り替わるだけね」と確認してもらうためにも、表示させておいた方がよくありませんか・・・・
「混乱させないためにPC用レイアウトには切替ボタンは非表示」という考え方もありますが、私は余計なパターナリズムかなと今のところは思っています。

後日追記:
上記のように、PCサイトにも切替ボタンつけた方が良いかも、と書きましたが、実装していて気づきました。
PCサイト上でのクロスブラウザーでの検証と対策、スマホ用ブラウザーはバリバリにCSS3.0とHTML5で対応なので、PC用の旧ブラウザーでの検証の実作業が発生するので、費用が「さらに倍」となりかねなかったです。作業時間と効果を考えれば、PC用サイトではレイアウト切替ボタンはイラネーという線が濃厚になるのも仕方がないことかもしれませんね。