ipad端网页屏幕变小了

来源：互联网发布：linux系统编程 pdf康华编辑：程序博客网时间：2024/04/28 19:35

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

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

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

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。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之间。

注：以上信息取自http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

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

http://developer.android.com/guide/webapps/targeting.html

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

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

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

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

有了这些信息，我也拿出了俺的三星i9100进行了测试，如果如下：

先贴HTML结构：

[html] view plain copy
<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,target-densitydpi=360" />  
<link href="inc/base-min.css" rel="stylesheet" type="text/css">  
<style type="text/css">  
body{border:4px solid #F00;}  
</style>  
</head>  
  
<body>  
<p>如果你要为网页针对不同屏幕分辨率修改，用 -webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有灵活性。</p>  
<p>在iOS中有两个meta值， apple-mobile-web-app-capable 和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。</p>  
<div class="demo">  
<img src="images/mm1.jpg">  
<br />  
<img src="images/mm2.jpg">  
<br />  
<img src="images/mm3.jpg">  
</div>  
</body>  
</html>  

0 0