I think folks agree that these are important use cases.
disagreement is about how to address them.
For example, another
approach is to use responsive images (e.g., srcset and image-set)
together with device units in CSS.
Now that WebKit has support for
subpixel layout, we can provide a high quality implementation of these
By contrast, target-densitydpi does not have broad support from
implementors, and there are concerns about the quality of the current
implementation and its maintainability.
On Fri, Jun 1, 2012 at 9:15 AM, Konrad Piascik && wrote:
& Reposting comment from Bug 88047
& After discussing this internally we believe that while the current implementation of target-densitydpi is not ideal it's ability to allow you scale your viewport to a given target density as well as to allow you to not scale (deviceDPI) are both desired features of this API that we'd like to have available to developers.
& This is useful for 2 cases:
& 1) automatically scaling content to the AutoValue (ie 160) DPI, which is what most mobile optimized sites do
& 2) allowing the user to have pixel perfect rendering on a given device.
& ________________________________________
[] on behalf of Adam Barth []
& Sent: Friday, June 01,
& To: Maciej Stachowiak
& Subject: Re: [webkit-dev] Device and page scaling
& I've posted a patch to remove target-densitydpi:
& There's some concern that target-densitydpi is used by some apps that
& are bundled with Android, but folks appear willing to deprecate the
& feature and to migrate those apps to using other mechanisms, such as
& responsive images and CSS device units.
& Once that patch lands, I'll start to unwind the complexity introduced
& by the feature.
Previous message:
Next message:
Messages sorted by:WebKit不再支持target-densitydpi，有什么替代方法_百度知道
WebKit不再支持target-densitydpi，有什么替代方法
于网页说使用CSS3 媒体查询页面视窗区域设置设备物理尺寸 避免同辨率带问题 通@viewport规则或者meta HTML标签做点： @viewport { width: device- }
&meta name=&viewport& content=&width=device-width&&
基本需要target-densitydpi
觉target-densitydpi必须 CSS3媒体查询resolution属性与target-densitydpi作用差
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁css - Adjust Phonegap app UI without target-densitydpi=device-dpi - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I have created an app using Phonegap for the Android platform.
To compensate for different device resolutions (dpi) and screen sizes, the dimensions of all UI elements have been specified in terms of em. Then I am using CSS media queries to set a different base font size using -webkit-device-pixel-ratio.
Everything used to work fine and as expected until I found out that target-densitydpi=device-dpi is deprecated by webkit and support will be removed in future.
Here is my meta viewport tag before removing the target-densitydpi :
&meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi"&
I found when I remove target-densitydpi, the app no longer looks as expected, in fact the dimensions of viewport decreases dramatically. Here are the before and after screenshots taken on Xperia L (Android 4.1.2) having a width of 480px and window.devicePixelRatio of 1.5:
before removing target-densitydpi :
after removing target-densitydpi :
The app is supposed to look like the former screenshot without target-densitydpi, but I am really lost on how to achieve that? Will it require rewriting of CSS values?
Is there a way to enforce target-densitydpi=device-dpi without using the meta tag?
I found the solution using jQuery
I added the following code and it works as expected now, (I've added id='viewport' to my meta html tag)
var viewportScale = 1 / window.devicePixelR
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");
This will support screens with window.devicePixelRatio ranging from 0.5 to 6
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled8812人阅读
移动开发（1）
前段时间同事在做WAP页面，发现页面设置了meta viewport中的大众属性，即：&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=no& &
但发现页面依旧不根据手机屏幕进行自动缩放，后来找其他同事帮忙解决了，我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性。看之初不太了解，也因为当时自己手上有其他需求在处理，最近突然想起了这件事，准备对它做一些了解，以备不时之需。
首先来了解一下这个属性到底是做什么的，从网上摘录了一段简介，如下：
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android
Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
注：以上信息取自
上面的信息我也从android官网找到了相关资料，这个资料在上面URL页面中都进行了翻译！
从这段简介可以得到如下信息：
1、它是指的屏幕分辨率，现在绝大多数智能手机屏幕都是可以通过viewport中的width来页面宽度的调整，其实我的理解就是调整屏幕显示该页面的分辨率，只是这个值不是直观来设置，而是浏览器通过width值来进行计算得出。
2、这个属性只对android系统起作用，专有属性。IOS不支持它，所以说起来，还是有兼容性问题，如果页面是兼容IOS和android的话。
3、这个属性取值还挺多的，不过，一般个人使用较多的可能会是第五种，即自定义，因为这个不需要记住前端四个值的单词。
有了这些信息，我也拿出了俺的三星i9100进行了测试，如果如下：
先贴HTML结构：
&!doctype html&
&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;}
&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&&
&img src=&images/mm2.jpg&&
&img src=&images/mm3.jpg&&
chrome android版（）
属性的所有取值都不支持！
UC（最新版V9.1）
所有属性都有支持，具体情况如下：
device-dpi
medium-dpi
系统自带（android 4.1.2）
所有属性都有支持，具体情况如下：
device-dpi
medium-dpi
查看测试时，虽然同时注意图片与文字大小的变化！
从各浏览器的测试效果来看，只有android WEB和UC支持这个属性，依目前国内手机浏览器的占比来看，UC使用率还是非常高的，所以，在android方面使用这个属性去解决问题的话，还是可以得到大面积支持的。另外关于这个属性中最后一个自定义取值，当值超过最大&#或小于最小值70的时候，所设置的自定义值将被忽略，系统将会使用默认值medium-dpi来显示。
另外，在搜寻这个属性的同事，从网上得到的另一个信息是关于WEBKIT对于这个属性不再进行支持，具体信息如下：
There's&some&concern&that&target-densitydpi&is&used&by&some&apps&that
are&bundled&with&Android,&but&folks&appear&willing&to&deprecate&the
feature&and&to&migrate&those&apps&to&using&other&mechanisms,&such&as
responsive&images&and&CSS&device&units.
不过，经过我个人测试至少android目前的4.1.2对这个属性还是会有支持，或许之前的老版本也会有支持！
以上信息都是经过个人测试得到，如果有不同的见解，也希望大家能进行交流，谢谢！
另外，对于WEBKIT不在再这个属性的另一个解决办法是网络上提到比较多的二种方案：
1、responsive&images
2、CSS&device&units
这二个东西到底如何，我也将会做进一步的了解。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：15811次
排名：千里之外
原创：10篇
(1)(1)(2)(1)(1)(2)(2)(1)(3)(2)WebKit不再支持target-densitydpi，有什么替代方法_百度知道
WebKit不再支持target-densitydpi，有什么替代方法
提问者采纳
于网页说使用CSS3 媒体查询页面视窗区域设置设备物理尺寸 避免同辨率带问题 通@viewport规则或者meta HTML标签做点： @viewport { width: device- } 基本需要target-densi...
来自团队：
其他类似问题
为您推荐：
webkit的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁