5

我在具有相同屏幕分辨率的两个不同 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;
}

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

4

2 回答 2

0

Well I'm facing the same problem. I guess the problem is with html handling tables. You can go around this if you want too by using instead of table, and set the div width as percentage rather than fixed pixel. And most of the properties you want in tables are available in the divs (css)

and in you css try this 

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

with the figures you want.

or use 

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

some testing needed to find out results :)

于 2013-02-06T02:11:33.367 回答
0

尝试

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" / >
于 2012-09-24T07:19:52.867 回答