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-320px) and (-webkit-min-device-pixel-ratio:2){
     //写针对iphone4的样式
 }

按需求导入css

<link rel="stylesheet" href="" media="screen and (min-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   }