移动端页面兼容性解决方案

一, css部分

　　1,meta标签

关于 initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5

　　2,body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，要再加一层div设置 height:100%加overflow：hidden（html,body加height:100%），这样元素超出body的高度也不能滑动了 html,body{height:100%;overflow:hidden}

　　3,做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为640*960

　　4,去除webkit的滚动条

　　　　element::-webkit-scrollbar{

　　　　display: none;

扫描二维码关注公众号，回复： 2987313 查看本文章

　　　　}

　　6,去除button在ios上的默认样式

　　　　-webkit-appearance: none;

　　　　border-radius: 0

　　7,不想让按钮touch时有蓝色的边框 -webkit-tap-highlight-color:rgba(0,0,0,0);

　　8,使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）

　　　　常见的两种解决方案:

a, img{display:block}；

b, img{vertical-align:top}

　　 9, 在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定

　　10,如果想改变 placeholder 里的样式，需要用css伪类。如 ::-webkit-input-placeholder{color:#ccc}

　　11, 使用rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。解决：利用js获取文字line-height再去设置div高度

二, js部分

　　1,preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

　　　　　　用e.preventDefault()会阻止的scroll，click等事件

　　2,HTML5的新js API有新的选择器，比如querySelector(".class #id")和querySelectorAll(".class element")。

　　3,点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟

4,判断手机的类型

window.onload = function () {
　　var n = navigator.userAgent;
　　if (n.indexOf('Android') > -1 || n.indexOf('Linux') > -1) {
　　　　console.log("安卓手机");
　　} else if (n.indexOf('iPhone') > -1) {
　　　　console.log("苹果手机");
　　} else if (n.indexOf('Windows Phone') > -1) {
　　　　console.log("winphone手机");
　　}  else if (n.indexOf('Google Phone') > -1) {
　　　　console.log("谷歌手机");
　　} 

}

　　 5,判断是否来自微信浏览器

function isBrowser() {
        var userAgent = navigator.userAgent;
        //微信内置浏览器
        if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
            return "MicroMessenger";
        }
        //QQ内置浏览器
        else if(userAgent.match(/QQ/i) == 'QQ') {
            return "QQ";
        }
        //Chrome
        else if(userAgent.match(/Chrome/i) == 'Chrome') {
            return "Chrome";
        }
        //Opera
        else if(userAgent.match(/Opera/i) == 'Opera') {
            return "Opera";
        }
        //Firefox
        else if(userAgent.match(/Firefox/i) == 'Firefox') {
            return "Firefox";
        }
        //Safari
        else if(userAgent.match(/Safari/i) == 'Safari') {
            return "Safari";
        }
        //IE
        else if(!!window.ActiveXObject || "ActiveXObject" in window) {
            return "IE";
        }
        else {
            return "未定义:"+userAgent;
        }
    }

　　　　6,微信浏览器里均不能打开下载的链接，需在浏览器打开

移动端页面兼容性解决方案

猜你喜欢