web网页开发注意事项

1.网页自适应问题

html {
     font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif
    -webkit-text-size-adjust: 100%;//取消浏览器字体大小的限制
    font-size: 62.5%;//在不同设备屏幕上字体自适应
}

为什么设置根元素html的font-size:62.5%？

当html使用 font-size: 62.5%；1em则=16px*62.5%=10px,1.2em则=12px，比较简单且精确。

1rem = 62.5%*1em =16px*62.5% =10px; 

(注意：实际开发在不同的移动端设备，1rem不是都等于10px，自适应还是需要真机去测试) 

移动端网页盒子模型css单位使用：rem

结合宽度百分比，自适应感觉会比较好，最外层或者是主要元素的父元素使用width:百分比，如width:80%；

如果有些页面在更小的设备或者更大的设备上自适应不好，可以使用媒体查询@media

（1）@media only screen and (-webkit-min-device-pixel-ratio:2){/*针对iphone4的css样式*/}

（2） iPhone 3 和 iPod(320x480像素的解决方案)
@media only screen and (max-device-width:480px){/*针对iPhone 3和iPod的css样式*/ }

（3）iPhone5

/* iphone5分辨率 */

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (实际像素)

screen Height = 1136px (实际像素)

Device-pixel-ratio:2

/* iphone4-iphone4s分辨率 */

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (实际像素)

screen Height = 960px

（4）iPad

iPad上要使用device-width而不是max-device-width,并且可以设置横屏和竖屏模式
@media only screen and (device-width:768px){/*针对ipad的css样式*/}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){/*ipad竖屏的css样式*/}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){/*ipad横屏的css样式*/}

 /* 判断ipad */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px){

/* style */

}

/* ipad横屏 */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape){

/* style */

}

/* ipad竖屏 */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait){

/* style */

}

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px){

/* style */

}

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

}

2.样式兼容性问题

/*清除苹果手机input的默认样式*/
input,button,textarea { cursor: pointer; -webkit-appearance: none; }

3.苹果手机input/textarea聚焦问题

$(".reply_text")直接使用click事件聚焦没效果，弹不出手机虚拟键盘，解决方法：使用bind绑定点击事件

$(".reply_text").bind("click",function(){           
            $("#input_id").focus();
  })