lil*_*die 46 html scaling android
我一直在尝试确定视口 - 以及其中的内容 - 如何受到用于使用WebView或本机浏览器绘制内容的视口元标记的影响.
我遇到的是一些明显的不一致.我创建了一个小页面(见下文),其中包含一个图像和一些用于显示视口大小的javascript,因此我可以直观地看到图像的缩放以及获取确切的数字.
首先,一些观察:
设备#1:物理屏幕为1024x600,运行Android 2.2.
设备#2:物理屏幕为800x480,运行Android 2.3.2.
在这些结果中,以下内容没有意义:
有谁知道那些没有意义的事情发生了什么？
有谁知道为什么许多值与物理像素相匹配的10个像素,但结果就好像它们匹配？(例如1.7和2.6)
我做错了什么,或者除非用户也被允许缩放并设置最小比例值,否则看起来不可能缩小到1.0以外？
也就是说,即使有效值为0.01到10,除非您还可以设置最小比例,否则将忽略1.0以下的初始比例值.
在Android的文档也说,当用户可扩展性是没有的最小/最大刻度值会被忽略.这似乎没有用.并且2.9-2.11似乎表明你不能自己计算它并设置宽度.
最后,我正在使用的HTML:
<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
<meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script>
$("#bl1").click(function(){
var pageWidth = $(document).width();
var pageHeight = $(document).height();
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script>
</body>
</html>
那么......我错过了什么？
Már*_*son 15
你在那里开辟了有趣的蠕虫病毒.当您尝试更多设备时,您可能会看到更多的怪异和随机错误.有趣的时刻!:-)
我怀疑你可能想要放弃的某个地方,并试着......
border-image以及background-image与良好支持的background-size属性1相结合,使事物呈现出美观和清晰2.1)为了向旧浏览器(如MSIE8)提供向后兼容性,您需要使用双重background-image声明 - 例如:
background-image: url(low-res.png); /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size: 100px 10px; /* CSS3 */
2)该-webkit-max-device-pixel-ratio媒体查询也可以帮助,但顾名思义它仅适用于WebKit浏览器.
漫谈:
新一代Android和iOS设备具有不同的屏幕DPI,他们使用它来报告CSS像素而不是实际的设备像素.这既好又坏 - 取决于你如何看待它.
这很糟糕,因为你不再能够保证你曾经拥有过的设备像素控制,并且使用了大多数同质的屏幕.
另一方面,它很好,因为你知道你的设计永远不会变得如此微小,以至于普通人无法阅读/使用它们.
使用的问题target-densitydpi=device-dpi在于,当它在7英寸宽的800px屏幕上工作奇迹时,它将彻底破坏你在4英寸宽960px屏幕上的应用程序.