admin管理员组

文章数量:1516870

今天突然发现ipad显示的屏幕没有电脑上面的那么宽,原来因为是一行代码的问题

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

去掉  target-densitydpi=320,width=640 就行了

首先来了解一下这个属性到底是做什么的,从网上摘录了一段简介,如下:

一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。 支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

注:以上信息取自

上面的信息我也从android官网找到了相关资料,这个资料在上面URL页面中都进行了翻译!


从这段简介可以得到如下信息:

1、它是指的屏幕分辨率,现在绝大多数智能手机屏幕都是可以通过viewport中的width来页面宽度的调整,其实我的理解就是调整屏幕显示该页面的分辨率,只是这个值不是直观来设置,而是浏览器通过width值来进行计算得出。

2、这个属性只对android系统起作用,专有属性。 不支持它,所以说起来,还是有兼容性问题,如果页面是兼容IOS和android的话。

3、这个属性取值还挺多的,不过,一般个人使用较多的可能会是第五种,即自定义,因为这个不需要记住前端四个值的单词。

有了这些信息,我也拿出了俺的三星i9100进行了 ,如果如下:

先贴HTML结构:


本文标签: 使用编程像素密度