web移动端兼容操作总结

##WEB兼容手机屏幕和输入设备的主要的4种参考

###HTTP: 匹配UserAgent字段 User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

最主流的方法就是在服务端/客户端查询这个字段:

//检测是否是移动端
        function checkMobile() {
            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                alert("请在移动端查看（或者开发者模式）");
            }
        }

###JS: 判断window和screen 屏幕可用工作区高度/宽：window.screen.availHeight/window.screen.availWidth

屏幕分辨率的高/宽：+window.screen.height/window.screen.width

网页可见区域宽/高：+document.body.clientWidth/document.body.clientHeight

我喜欢一种暴力的方式:

    ///嘿嘿嘿
    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

###CSS: @媒体查询通过查询屏幕宽度判断手机,只局限于css样式; 特点是,媒体查询动态更新,非常方便,而且不仅适应屏幕大小,还动态兼容窗口尺寸的改变:

@CHARSET "UTF-8";
@media (max-width: 991px) {
    /*do something*/
}
@media (min-width: 1601px) {
    /*do something*/
}

###HTML: 添加缩放标签也是非常实用的,通常手机屏幕的ppi/dpi非常高,所以正常的字体会显得很小,于是最好在html头中添加以下viewport标签:

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

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

web移动端兼容操作总结

猜你喜欢