手机浏览器默认放大显示网页的问题

[ 作者:笑傲江湖 发布于:2015年-7月-4日 18:23 星期六  分类:百 宝 箱 ]

  今儿加班赶个活,临时弄个演示页面,需要嵌入到安卓手机APP里使用,然后又遇到之前就遇到的一个历史遗留问题,关于页面宽度自适应手机屏幕这个纠结的事情,自适应是OK的,但是,手机浏览器非要自作多情的把页面放大一点显示,导致网页上部分元素显示不正常,或者和PC浏览器上差异过大。以前遇到的时候,也就是折腾个大概,看起来差不多就行了,没有仔细去深究一下HTML相关控制代码,这次是有空,就彻底好好搜索一下,看有没有啥好办法能一劳永逸,唉,搜出的中文结果,基本是一大抄,你抄我的,我复制你的,你粘贴他的,测试了一圈,还是老样子。后来没招,看英文的HTML说明文档吧,然后又发现个参数,测试后发现有效,不敢独享,特发文纪念。
首先要做的,你的网页最开头,HTML5的页面头声明是必需的,老版本的HTML没有测试。
<!DOCTYPE HTML>
<html>
或者使用Mobile页面头声明:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
然后再之后添加如下代码:
<meta name='viewport' content='width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />
这里的viewport相当于页面视图吧,用来控制网页如何显示的一个参数。重点在后面,content等号后面引号里的才是关键:
width:指定页面显示的宽度,可以是一个具体的值,比如480,默认单位应该是像素。或者可以是device-width,也就是让网页宽度自适应到设备的宽度。比如,你手机屏幕分辨率宽度是480像素,那网页显示的宽度就是480像素,如果是720像素,那网页宽度就是720像素。以此类推。
height:高度参数,用法同上。这个一般不用指定,反正一屏显示不下,可以滚动。
initial-scale:页面显示的初始比例大小,1.0表示原始大小,2.0表示放大一倍,0.5表示缩小一倍,以此类推。
minimum-scale:页面显示的最小比例,也就是用手机查看网页时,能把页面缩小到什么程度。具体赋值同上。
maximum-scale:页面显示的最大比例,也就是用手机查看网页时,能把页面放大到什么程度。具体赋值同上。
user-scalable:是否允许用户缩放网页显示。yes表示允许,no表示不允许。如果此项设置为no那么上面三项页面缩放相关的参数无效。
target-densitydpi:目标设备的像素密度,可能是这么个意思,单位是dpi,具体使用时给出数值即可,范围是70-400之间,不用带单位。Android Browser和WebView默认屏幕为中像素密度。其次还有一下其他几个参数值可用:
  device-dpi: 使用设备原本的像素密度作为目标 dpi。不会发生默认缩放。
  high-dpi: 使用高像素密度作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
  medium-dpi: 使用中等像素密度作为目标 dpi。高像素密度设备相应放大,低像素密度设备相应缩小。这是默认的target density。
  low-dpi: 使用低像素密度作为目标 dpi。中等像素密度和高像素密度设备相应放大。

  好了,起作用的终极参数就是这个target-densitydpi了,为了不让手机浏览器(Android Browser或者WebView)根据不同屏幕的像素密度对页面进行缩放,那就把这个参数的值设置为device-dpi吧,这样你的页面就不会被缩放了,页面显示会根据你手机分辨率来自适应显示,获得很好的显示效果,就和你在PC上浏览器里测试的效果一致。再配合前面那个宽度参数,页面就可以和设备屏幕相适应很好的显示了。最终俺使用的设置:
<meta name='viewport' content='width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />

微信支付宝

标签: HTML5 Android HTML 手机 Mobile 安卓

评论0 引用0 浏览907

上一篇 << 六周年  |  下一篇 >> 耳机用后感

说点什么:

正文内容:

 




图片博文
天山大峡谷白炽灯安宁渠的油菜花