移动端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));
});

 

posted @ 2014-04-11 00:22  还好我是程序员  阅读(230)  评论(0编辑  收藏