web移動開發基礎（1）

最近看了下關於手機網頁的書，如今作一下總結吧，方便之後本身看

    先了解一下幾個基本概念

 1： 視口:移動設備的瀏覽器視口分爲 可見視口   佈局視口咱們說視口通常指佈局視口。

        瀏覽器設置佈局視口 

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

   此時頁面的最大css寬度爲320px.
   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調用媒體查詢，針對iphone4寫的一個實例

@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   }