分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

本文分享的是viewport属性解决移动端竖屏切横屏字体被重置的问题。在最初做的时候因为一直没有在手机上实测页面，导致后来写了好些页面后实测发现页面特别小，几乎都看不见。

原因是每个移动设备都是自己默认的视口宽度。

视口：在移动端浏览器当中有两种视口：可见视口（设备屏幕大小）和浏览器视口（网页宽度）。

拿iphone4s来说，它的屏幕是320*480的，但是它却能展示980像素宽度的内容（iphone默认都是980），所以你把网页放到移动端展示就相当于缩小了980/320。手机这样做的目的是可以显示更多的东西，但是结果就是在PC端做好的页面到了移动端就像蚂蚁一样小！

移动端有一个meta标签:viewport，你可以用这个标签设定浏览器视口宽度和可见视口宽度一样。

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

对于一些不支持viewport的古老的移动设备浏览器（嗯，也许还有,比如黑莓），可以使用如下代码

<meta name="HandheldFriendly" content="true">

不过我觉得现在应该没多少人用这个，一般就写第一行就行了。

说到viewport，他其实还有一些其他属性：

initial-scale：初始缩放比例

maximum-scale：允许缩放的最大比例

minimum-scale：允许缩放的最小比例

user-scalable：是否允许手动缩放

这些属性有什么用呢？

移动设备在竖屏切换到横屏的时候字体会被重置，会变得很大，如何解决呢？

只需要这样设置

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

这样设置页面默认缩放大小比例是1，允许缩放也是1-1,相当于禁止缩放，浏览器只会按照样式定义的字体大小渲染。

你也许会看到这种写法。

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

但其实当你使用user-scalable=no 这个属性的时候minimum-scale=1,maximum-scale=1已经被忽略掉了，因为你已经禁止缩放了。

在其他地方找到了一些更具体的说法：

1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。

3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

 所以为了保险起见，建议使用第二种写法。

当然，这样做的坏处就是禁止用户进行缩放，在《web开发实战》中有一个折中的办法，有兴趣的可以去看下，这里就不在叙述。

一点点题外话：

在CSS3中有一个属性：-webkit-text-size-adjust。

这个属性也是禁止字体缩放，这个属性的好处在于可以自定义范围，可以根据项目需求设定。

 需要注意的是这个属性的作用是禁用Webkit内核浏览器的文字大小调整功能而不是对页面缩放控制。中文版chrome浏览器字体最小限制是12px。

不过由于该属性被滥用，在几年前桌面浏览器已经不支持了,所以我也没有真正去用过，都是在其他资料上看到的。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 关于viewport兼容性问题的实例代码

3. viewport专题：深入理解css中响应式 Web 设计-viewport

4. HTML5中Viewport的参数介绍以及使用方法

以上是分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例的详细内容。更多信息请关注PHP中文网其他相关文章！