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   }