Question

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

我的第一台设备是“Nexus 7平板电脑”，第二台设备是“三星Galaxy Note”。这两款设备的屏幕分辨率均为1280x800，两款设备都强制网页显示为纵向模式（通过Dolphin浏览器）。 dolphin浏览器还使用“全屏”插件。

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

我找到了一个页面，建议我可以使用Viewport元标记和一些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;
}

非常感谢任何理解这种行为的帮助！

Answer 1

尝试

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

Answer 2

我面临同样的问题。我想问题是html处理表。你也可以通过使用而不是使用table来解决这个问题，并将div宽度设置为百分比而不是固定像素。表格中您需要的大多数属性都可以在div（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) {
}

需要进行一些测试才能找到结果：）

跨Android设备的页面扩展问题

2 个答案: