エグゼクティブクリエイションでは東京/関東を中心に、これまで数多くの店舗・企業ページを作成してまいりました。そして、こちらのクリエイターブログにて「レスポンシブデザイン作成時の注意点」について、これまで3回分、掲載してきました。
今回は注意点というよりは「知っていると、少しトラブル対応がラクになるタイプ」のお話を載せたいと思います。これからホームページの作成を進める中で、少し他のwebページと差をつけられるかもしれません。
iPhone/iPad 向けページ作成/対策のアレコレ
日本のスマートフォンシェアのほぼ半分を占めるiPhone。
世界的に見てもかなり偏っているのが日本のスマホ事情なのですが、それゆえにiPhone/iPadでの表示エラーやレイアウト崩れは致命的です。
何と言っても、スマートフォンを持つ人の半分がおかしく表示されてしまうわけですから…！
背景がiOSの端末だけ表示されない要因
iPhoneあるあるの代表格です。
iPhoneXはまだ最新状況が不明ではありますが、iOSのSafariは画像の縦サイズ×横サイズが200万ピクセルを超えると、その画像を表示しなくなります。
具体的な大きさで言うと、1400ピクセル四方くらい、写真や画面の４：３比率なら1600×1200ピクセル程度が限度です。
ホームページを作成する中で、大きな背景画像が必要な時は注意が必要です。
一部分だけテキストの大きさがおかしい要因
大きさを制限した領域内に文字を置いた場合、そこだけテキストの大きさが他と合わなくなる場合があります。そんな時は下記のCSSで回避が可能です。
body{ -webkit-text-size-adjust: 100%;}
こちらも知らないとどうにもならないタイプの解決法のため、覚えておくととても役立ちます。
また、コレを追記したせいでAndroidでの表示がおかしくなった場合は、
<meta name="viewport" content="maximum-scale=1.0">
このようにViewportへscaleの値を設定するといい感じになります。
それでも直らない場合は、
治したい要素{ max-height:100%; }とCSSに追記することでなぜか対応できます。
電話番号でもない場所や、電話番号に勝手にリンクがついてる原因
iPhoneのブラウザでは標準で「電話番号っぽい数字の並びに電話のリンクを付ける」という機能が搭載されています。
便利なこともある反面、その一方でありがた迷惑なリンクが付いたり、特定業種の営業許可番号や認定番号などを勝手に電話番号と勘違いされたり…といったトラブルの要因にもなっています。
こういった時は以下の記述を追加すると、勝手にリンクを付けることが禁止されます。
<meta name="format-detection" content="telephone=no">
Android対策は、特別な内容がそこまでない
Androidの端末は、トラブルの原因の大半が１～3回目で書いたような端末ごとの仕様差によるものになります。
iPhoneと異なり、個別であまりにもスペックや画面サイズ、初期状態でのインストールソフトに差があるからです。そのため、特定の対策というよりはこれまで書いてきたことがいかに忠実に実行されているかによるところが大きくなります。
ちなみにバージョン4以前あたりの古いAndroidはバグが多く、新しい技術を試そうとするとかなり予想外の表示に悩まされていたのですが、最近のバージョンでは随分改善されています。
ブラウザの枠に色を付けたい
上記のように、Androidでは昔ほどバグらしいバグもなく、比較的快適に実装が可能です。
そんな中で、意外と見かけるのがこちら。
<meta name="theme-color" content="#カラーコード">
metaタグにこちらの表記を加えると、ブラウザの枠に色が付きます。
テーマカラーがはっきりしているサイトを運営している場合、統一感が出て非常に優秀です。
残念ながらiOSのSafariでは無効化されてしまいますが、それでも半数の方には有効でお手軽に気を引ける装飾です。
残念ながらiOSのSafariでは無効化されてしまいますが、それでも半数の方には有効でお手軽に気を引ける装飾です。
作業が手間でも、必ず確認をすべきな各端末での検証
レスポンシブサイトの最大の敵、それは端末での検証…
あっちでは見えていたのに、こっちでは動かない、レイアウトがおかしい、タップしても反応しない…などなど、端末の差というものは制作したものを検証するなかで際限なく現れてきます。
2300以上のホームページ作成を行っているエグゼクティブクリエイションでは、こういった端末検証についても制作部とディレクターとのダブルチェックはもちろん、原因不明な問題もしっかりとお調べし、修正・改善をいたします。
---------------------------------------------------------------
頼れるホームページ会社を探すなら、
エグゼクティブクリエイションへ
------------------------------------------------
---------------------------------------------------------------
◇WEB運営管理に関する
ご相談はコチラから
TEL: 03-5839-2512
FAX： 03-5839-2513
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
