Clever Geek Handbook

モバイルデバイス用のWebサイトを作成する方法

スタイル



ユーザーエージェント


モバイルデバイスのスタイルを有効にする1つの方法は、サーバーがクライアントから受信するユーザーエージェントを使用することです。

これは、一連のスクリプトcode.google.com/p/mobileesp 、およびYandex api.yandex.ru/detectorのサービスによって支援されます。

User Agentを使用する場合、常に発生する新しいUser Agentが唯一の問題です。





クライアント側


以前はこのアプローチを使用しました： 

  <link rel = "stylesheet" href = "site.css" media = "screen" />
 <link rel = "stylesheet" href = "mobile.css" media = "handheld" />


media = "screen"の行は通常のコンピューターに対応し、media = "handheld"はモバイルデバイスです。 新しいデバイスはこのアプローチを放棄しており、メディア属性内でクエリを使用する必要があります。



たとえば、画面幅が480px以下のデバイスの場合、次のコードを使用します。 



  <link rel = "stylesheet" href = "mobile.css" media = "画面のみ（（max-device-width：480px））/>


両方の方法を組み合わせて、次のように書くことができます。 

  media =「ハンドヘルド、画面のみおよび（最大デバイス幅：480px）」


ユーザー選択


デバイスがモバイルかどうかを常に正確に判断できるとは限らないため、使用するスタイルをユーザーに選択させることができます。



スタイルで書くもの


1.複数列のレイアウトを取り除く

2.ディスプレイの設定：なし。 重要でない要素

3.要素の周囲のマージンを減らす

4.写真、特に大きな背景の使用を減らす

5.小さなテキストのサイズを大きくすることにより、テキストの読みやすさを向上させます。

6.フローティング要素を捨てる

7.マウスオーバーイベントは機能しないことに注意してください。



スタイル以外のこと



多くのモバイルデバイスは、この電話番号のエントリを理解しています。 

  <a href="tel:15032084566" class="phone-link">（503）208-4566 </a>




一部のデバイスはすでにHTML5をサポートしているため、たとえば次のタグを使用できます。 

  <入力タイプ= "tel" />
 <入力タイプ= "メール" />


HTML5タグは、ブラウザー側の検証を許可し、適切な文字セットを開きます。



寸法と方向


最近のモバイルデバイスは通常、画面全体に収まるようにページを拡大縮小します。

これは必ずしも便利ではありません。 ブラウザーのこの動作を変更するには、ビューポート属性でメタタグを使用する必要があります。 例： 

  <メタ名= "ビューポート"コンテンツ= "幅= 320" />




この定義は、ページの320ピクセルがデバイスに表示されることを意味します。

スケーリングを無効にすることもできます。 

  <meta name = "viewport" content = "width = 320、user-scalable = false" />


デバイスの向きに基づいてスタイルを追加することもできます。 

 @import url（ "portrait.css"）allおよび（向き：縦長）;
 @import url（ "landscape.css"）allおよび（向き：landscape）;


ご存知のように、portrait.cssファイルは縦向きに使用され、landscape.cssは横向きに使用されます。



向きの検出はすべてのデバイスでサポートされているわけではありません;画面の幅を決定するためにmax-widthを使用する方がより信頼できます。



iPhoneの特記事項



1. iPhoneはAdobe Flashをサポートしていません

2.タグはサポートされていません 
  <入力タイプ= "ファイル" />
ファイル構造へのアクセスがないためです。

3. 25 KB以下のファイルがキャッシュされます

4. @ font-faceに問題があります-外部フォントの読み込みを使用しています。 フォントに関する記事も参照してください。



ただし、JavaScriptライブラリを使用して、iPhoneの特別な機能にアクセスできます。 Sencha Touch 、 jQTouch、およびiuiを調べてください。 これらのライブラリはAndroidでも動作します。 さらに、 jQuery Mobileの製品リリースが予定されています。



IPhoneスタイルページを表示するCSSフレームワークも参照してください。



次の構文を使用して、サイトに独自のアイコンを作成することもできます。 

  <link rel = "apple-touch-icon" href = "/ customIcon.png" />




アイコンは、PNG形式で57x57ピクセルにする必要があります。 Androidはそのようなアイコンも理解します。



この記事は、記事www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-websiteに基づいています



追加の読書のためのリンク



* モバイルWeb開発の現状-3つのパートでのモバイル開発に関する議論

* モバイルスタイルシートの返却 -スタイルの使用

* ハードボイルドCSS3メディアクエリ -デバイスのスタイル設定方法

* CSSメディアクエリfor Mobileは愚か者の金 -メディアクエリに対する議論

* モバイルWebデザイン -デザイン

* モバイルオペレーティングシステムとブラウザは反対の方向に向かっています -モバイルデバイスの世界の方向

* ポケットサイズのデザイン：Webサイトを小さな画面に移動することは、古くても有用な記事です。


More articles:


All Articles