移动端优化文本大小、viewport宽度以及缩放等问题

这里介绍的也是一些基础的东西,比如如何避免文本字体大小被重置,如何适应不同设备浏览器的宽度等等。

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

如果把iphone切换到横屏模式,页面的字体会突然的放大,页面字体大小被重置了,如何解决这个问题,只要在CSS部分加入下面的代码:

html {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

text-size-adjust: 100%;

}

另外关于使用px还是em的争论在Web开发领域争论的很激烈,Yahoo原本使用的是em,原因是IE6不支持px级别的缩放,但是现在IE6用户越来越少,在移动开发领域就不用太在意这个问题。

2.优化浏览器viewport宽度

每个移动设备都有自己一个默认的viewport width,比如Iphone是980px,如果你的页面设计不是按照这个像素宽度做的,那么出来的效果就会不尽人意了。所以我们需要做一个设置,让viewport width匹配设备宽度,在页面中加入以下代码:

<meta name="viewport" content="width=device-width">

现在网页的宽度跟设备屏幕的宽度相匹配。

对于一些古老的浏览器需要用到下面的代码

<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">

 3.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

在meta的viewport中添加以下代码

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

添加之后iphone中字体不会在横屏模式下突然变大,但是页面也不能缩放。可以找一些这方面的解决方法

https://gist.github.com/jdalton/903131

4.忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no">

5.忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no">

6.将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 可选default、black、black-translucent -->

7.viewport模板——通用

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

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

<link rel="stylesheet" href="index.css">

 

 

 

 

“移动端优化文本大小、viewport宽度以及缩放等问题”的一个回复

评论已关闭。