移动端web优化

1.避免文本字体大小重置。

问题：在移动端，如iphone，当把手机切到横屏显示的时候，扣篮器会自动地重置文本大小。

解决方法：添加带有前缀的text-size-adjust设置为100%，之所以不设置为none是因为在某些浏览器下，设置为none会导致页面的缩放功能被禁用。

代码：

html{
    -webkit-text-size-adjust:100%;    /*webkit浏览器*/
    -ms-text-size-adjust:100%;    /*windows mobile */
    text-size-adjust:100%;
}

 

2.优化浏览器视口设置

问题：移动端的默认视口宽度通常比较大（比如iphone为980px），会导致页面看上去感觉是“缩小”了。

解决办法：用meta标签设置viewport属性，对于不能识别viewport的较老的浏览器，用其他兼容性的属性。

代码：

<meta name="HandheldFriendly" content="true" />
<!-- 老版本的浏览器，如黑莓 -->
<meta name="MobileOptimized" content="320" />
<!-- 微软的老浏览器 -->
<meta name="viewport" content="width=device-width" />
<!-- HTML5通用解决方法 -->

 

3.Safari的横屏字体变大bug

问题：Safari从竖屏切到横屏的时候，字体会突然变打。

解决办法：1.禁用缩放。

　　　　　2.JS解决方法。

代码：

1.禁用缩放只需要在meta标签的viewport属性中添加几个值：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />

缺点：禁用之后，页面也失去了缩放的功能。

2.JS方法：

var metas = document.getElementsByTagName('meta');
//如果是用iphone浏览,默认禁用缩放……
if(navigator.userAgent.match(/iphone/i)){
    for(var i=0;i<metas.length;i++){
        if(metas[i].name="viewport"){
            metas[i].content="width=device-width,minimum-scale=1.0,maximum-scale=1.0";
        }
    }
    //当用户两个手指缩放页面时，实时重新启用缩放功能。
    document.addEventListener('gesturestart',gesture,false);
}
function gesture (){
    for(var i = 0;i < metas.length;i++){
        if(metas[i].name = "viewport"){
            metas[i].content = "width=device-width,maximum-scale=1.6,minimum-scale=1.0";
        }
    }
}

 

4.iphone全屏模式

问题：在iphone实现全屏浏览

解决方法：meta标签。

代码：

<meta name="apple-mobile-app-capable" content="yes" />
<!-- 从界面图标启动时，开启全屏模式 -->
<meta name="apple-mobile-app-status-bar-style" content="black" />
<!-- 在浏览器顶部显示一个状态栏 -->
<meta name="apple-touch-startup-image" href="path/to/img" />
<!-- 程序启动时，显示一个预加载图片 -->

 

5.防止ios在聚焦的时候自动缩放

问题：IOS设备在表单元素聚焦时会自动缩放。

解决办法：利用JS添加事件，检测到表单元素得到焦点时，禁用缩放。

代码：

//使用jquery
var metas = $('meta[name="viewport"]');
$('input textarea select').bind('blue focus',function(event){
    metas.attr('content','width=device-width,initial-scale=1.0' + (event.type = 'blue' ? 1.6 : 1));
});

 

转载于:https://www.cnblogs.com/SKLthegoodman/p/mobile-web.html