跨 Android 设备的页面缩放问题答案

【问题标题】：Page Scaling Issue Across Android Devices跨 Android 设备的页面缩放问题
【发布时间】：2012-09-09 15:51:50
【问题描述】：

我在两个具有相同屏幕分辨率的不同 Android 设备之间缩放时遇到问题。

我的第一台设备是“Nexus 7 Tablet”，第二台是“Samsung Galaxy Note”。两种设备的屏幕分辨率均为 1280x800，并且两种设备都强制网页显示为纵向模式（通过 Dolphin 浏览器）。海豚浏览器也使用“全屏”插件。

为了说明为什么我需要在页面加载时正确缩放屏幕尺寸，我正在尝试构建一个电视遥控器 Web 界面以与 Eventghost 一起使用。我一直在努力让“视口”元标记处理调整大小，但我似乎无法让它正常工作（尽管在 Android 方面有所有可用的文档）。

我发现一个页面建议我可以使用 Viewport Meta Tag 和一些 CSS 的组合来处理缩放，并且我只需要为每个设备尺寸添加一个条目（没问题，因为我的两个设备都有相同的屏幕分辨率）。我发现该技术的页面如下：

http://www.propublica.org/nerds/item/adaptive-design-fixed-widths-and-tablets

所以在尝试了这个之后，我很高兴。缩放在我的 Nexus 7 上正常工作。但是，当我通过 Galaxy Note 加载同一页面时，缩放不起作用（缩小了一点，但大约一半的页面仍然被截断）。我加载了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;
}

任何帮助理解这种行为将不胜感激！

【问题讨论】：

标签： javascript android html css viewport

【解决方案1】：

试试

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" / >

【讨论】：

【解决方案2】：

嗯，我也面临同样的问题。我想问题出在html处理表上。如果您愿意，也可以使用代替表格来解决此问题，并将 div 宽度设置为百分比而不是固定像素。而且你想要的表格中的大部分属性都可以在 divs (css) 中找到

在你的 css 中试试这个

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}

你想要的数字。

或使用

@media only screen and (min-width: 320px) and (max-width: 480px) {
}

需要一些测试来找出结果:)

【讨论】：