我在两个具有相同屏幕分辨率的不同 Android 设备之间进行缩放时遇到问题。
我的第一台设备是“Nexus 7 平板电脑”，第二台是“三星 Galaxy Note”。两种设备的屏幕分辨率均为 1280x800，并且两种设备都强制网页显示为纵向模式(通过 Dolphin 浏览器)。海豚浏览器还使用“全屏”插件。
为了解释为什么我需要在页面加载时正确缩放屏幕大小，我正在尝试构建一个电视 Remote 网络界面以与 Eventghost 一起使用。我一直在努力让“Viewport”Meta 标记处理调整大小，但我似乎无法让它正常工作(尽管在 Android 方面有所有可用的文档)。
我发现一个页面建议我可以使用视口(viewport)元标记和一些 CSS 的组合来处理缩放，并且我只需要为每个设备尺寸添加一个条目(没问题，因为我的两个设备都有相同的屏幕分辨率)。我找到该技术的页面如下:
http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets
所以在尝试之后，令我高兴的是。缩放在我的 Nexus 7 上正常工作。然而，当我通过 Galaxy Note 加载同一页面时，缩放不起作用(缩小了一点，但大约一半的页面仍然被 chop )。我加载了www.portvie.ws (从上面的页面)查看每个设备显示的屏幕尺寸，都是 800x1280。
正在使用的 HTML 如下:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>
</head>
<body onLoad="StartUp()" background="Background.png">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="200" Height="200" Background="A_HOMEBUTTON.png"></td>
<td Width="700" Height="200" Background="A_HOMESCREEN.png"></td>
<td Width="700" Height="200" Background="A_BLANK.png"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="50"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td Width="1600" Height="2310" Background="B_HOMESCREEN.png"></td>
</tr>
</table>
</body>
</html>
我用来处理缩放的 CSS 如下:
@media screen and (device-width: 800px) { html { zoom: 35%; } }
body
{
-webkit-user-select: none;
overflow: hidden;
}
如果能帮助理解这种行为，我们将不胜感激!
最佳答案
尝试
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" / >
关于javascript - 跨 Android 设备的页面缩放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12459118/