跨越不同Android设备的页面缩放问题

4

我在两个不同的安卓设备上遇到了缩放问题,这两个设备具有相同的屏幕分辨率。

我的第一个设备是"Nexus 7平板电脑",第二个是"三星Galaxy Note"。这两个设备都有1280x800的屏幕分辨率,并且两个设备都强制将网页显示为竖屏模式(通过Dolphin浏览器)。Dolphin浏览器还使用了"全屏"插件。

为了让屏幕大小在页面加载时能够正确缩放,我正在尝试构建一个用于Eventghost的电视遥控器Web界面。我一直在努力让"Viewport"元标记处理调整大小,但我似乎无法使其正常工作(尽管在安卓方面有很多可用的文档)。

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

任何帮助理解这种行为的都将不胜感激!
2个回答

0

尝试

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

0

我也遇到了同样的问题。我猜问题出在处理HTML表格上。如果你愿意,你可以通过使用div代替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) {
}

需要进行一些测试以找出结果 :)


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接