Webモバイル開発の基礎(1)

最近携帯のホームページについての本を読んで、今まとめてみましょう.後で自分で読むのに便利です.
まずいくつかの基本的な概念を理解します
1:ビューポート:モバイルデバイスのブラウザビューポートを表示ビューポートレイアウトビューポートに分けます.ビューポートは一般的にレイアウトビューポートを指します.
ブラウザ設定レイアウトビューポート

1 <meta name="viewport" content="width=320px"/>

このときのページの最大css幅は320 pxである.viewportのその他のオプション属性
widthページの最大幅heightページの最大高さinitial-scale初期スケール(1-10)minimum-scale最小スケール比(1-10)maximum-scale最大スケール比(1-10)user-scalableデフォルトyes
一般的に推奨される元のラベルの書き方

1 <meta name="viewport"  content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0"/>

  
2:メディアクエリ
まず小さな例をあげます
cssはメディアクエリーを呼び出し、iphone 4に書かれたインスタンスに対して

@media all and(max-width:320px) and (-webkit-min-device-pixel-ratio:2){
     //   iphone4   
 }

必要に応じてcssをインポート

<link rel="stylesheet" href="" media="screen and (min-width:1024px)"/>

jsでメディアクエリーを呼び出す.携帯電話を傍受する横画面縦画面を実現

function handleOrientationChange(mql){
    if(mql.matches){
           
   }else{
           
   }
 }
 
 //         
 var mql=window.matchMedia("(orientation:portrait)")   //    MediaQueryList,          ture or false
  mql.addListener(handleOrientationChange)
  //     ，                
  handleOrientationChange(mql)
  
  //     
  mql.removeListener(handleOrientationChange);

携帯電話ではhoverイベントが無効になりますので、携帯電話でhoverイベントを遮断するとパフォーマンスが向上します
簡単な解決方法

1 document.documentElement.className+=('ontouchstart' in window)? 'touch':'no-touch';

1  document.no-touch .item:hover{
2   }