Javascript 跨Android设备的页面缩放问题_Javascript_Android_Html_Css_Viewport

Javascript 跨Android设备的页面缩放问题

javascript android html css

Javascript 跨Android设备的页面缩放问题,javascript,android,html,css,viewport,Javascript,Android,Html,Css,Viewport,我在两个屏幕分辨率相同的不同android设备之间的缩放方面遇到了问题我的第一款设备是“Nexus7平板电脑”，第二款是“三星GalaxyNote”。两种设备的屏幕分辨率均为1280x800，并且两种设备都强制网页显示进入纵向模式（通过Dolphin浏览器）。dolphin浏览器还使用“全屏”附加组件为了解释为什么我需要屏幕大小在页面负载上进行适当缩放，我正在尝试构建一个电视遥控器web界面，用于Eventghost。我一直在努力让“Viewport”元标记处理大小调整，但我似乎无法让它正常

我在两个屏幕分辨率相同的不同android设备之间的缩放方面遇到了问题

我的第一款设备是“Nexus7平板电脑”，第二款是“三星GalaxyNote”。两种设备的屏幕分辨率均为1280x800，并且两种设备都强制网页显示进入纵向模式（通过Dolphin浏览器）。dolphin浏览器还使用“全屏”附加组件

为了解释为什么我需要屏幕大小在页面负载上进行适当缩放，我正在尝试构建一个电视遥控器web界面，用于Eventghost。我一直在努力让“Viewport”元标记处理大小调整，但我似乎无法让它正常工作（尽管Android端有所有可用的文档）

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

@media screen and (device-width: 800px) { html { zoom: 35%; } }
body
{
-webkit-user-select: none;
overflow: hidden;
}

所以在尝试了这个之后，我很高兴。在我的Nexus7上，缩放功能正常工作。然而，当我通过Galaxy便笺加载同一页时，缩放不起作用（缩小了一点，但仍有大约一半的页面被截断）。我加载（从上面的页面）以查看每个设备的屏幕大小，两者都是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>

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

试试看

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

我也面临同样的问题。我想问题在于html处理表。如果需要，您也可以使用代替表格，将div宽度设置为百分比而不是固定像素。表中所需的大多数属性都可以在divs（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) {
}

需要进行一些测试以找出结果：）