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

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

#1楼 票数:0

尝试

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

#2楼 票数:0

好吧,我面临同样的问题。 我想问题是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) {
}

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

  ask by user1677461 translate from so

未解决问题?本站智能推荐:

4回复

元视口和Android的问题

我正在尝试基于JQuery创建一个通用的javascript对话框类来创建以屏幕为中心的div-popups。 在所有常见的浏览器中实现这一点是普通的。 对于移动平台,出现了视口问题; 可见视口的差异(您看到的是当前网站的“查看窗口”,是否放大)和布局视口(基础页面的尺寸,或者换句话说,
1回复

使内容适应屏幕尺寸-Webview-Android

我无法调整自己的网页, 到目前为止,我已经添加了 元标记 这是页面的CSS 这给出了这样的东西 我希望我的内容适合屏幕
1回复

Viewport元标记在Android上无法正常工作

我创建了一个响应式网站,并使用视口元标记来修复不同设备上的缩放。 我还使用JavaScript告诉设备不要缩放到525px以下,因为这是我的body元素的最小宽度: 这几乎适用于我测试过的几乎所有设备; 特别是它适用于iOS移动设备(iPhone / iPad)。 该网站完美缩放,一切
1回复

身高:100%无法在Android网络应用中运行?

我正在开发一个Web应用程序,它在浏览器中工作得很好,并且在将它保存到主屏幕时,在android和ios上。 但是,当它作为一个实际的应用程序下载时,身体上的%高度在android上不起作用(如果我将其设置为像素值,则可以正常工作)。 我也有一些使用视口高度的元素,这也不起作用,这很奇怪,因
1回复

背景图片仅在Android浏览器上无法正确显示

我正在尝试使用Visual 2010上的引导程序库创建我的第一个响应式网站。“登录”页面的背景是在漏洞页面中显示的图像。 这就是为什么我使用viewPort在手机上对其进行调整... <meta name="viewport" content="width=device-width, i
1回复

自动调整网页大小以适应移动设备的全高?

我一直在尝试让我的网页自动调整大小以适应移动设备的高度。 屏幕截图的左侧显示了没有缩放的版本,而在右侧,我使用了“initial-scale”属性来手动缩放页面: 这就是我如何实现屏幕截图的右侧: 我想知道是否有一个技巧(html、css、js?)可以自动调整我页面的显示大小而无需手动设置“初始比
2回复

jQuery函数问题

我已经改了一个人的例子(来自我之前问过的Stack Overflow问题)来做我想做的事,但是它似乎没有用。 如果有帮助,那么这里是该问题的链接 该功能不起作用: 这是jsfiddle 当橙色正方形进入屏幕时,其余正方形应更改为红色,然后当橙色正方形不在屏幕上时,红色正方形需要再
2回复

页脚项随视口均匀扩展

我正在尝试使页脚显示5个项目,这些项目利用视口的整个宽度均匀地隔开自己。 我设法使其正常工作,但是当您调整浏览器窗口的大小时,最后一个框闪烁并被向下推。 http://jsfiddle.net/pnUnU/ 我想知道是否有更好的方法进行编码? 而且,一旦按钮达到某个(较小)尺寸,是否