2011-10-09 88 views
2

我有一个针对不同设备上的纵向视图进行了优化的html页面。通常用此meta标签切换到横向模式时,页面会自动扩展到设备宽度:当设备改变方向时,Android设备不能缩放我的html网站

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

工作正常,在iOS上,但不会对我的里程碑和歌Nexus One在所有的工作。页面只停留在320像素宽度,就像是用纵向视图一样。另外,将视口元标记中的宽度或初始比例更改为某个值并不会产生任何影响,因为它应根据官方的android文档进行设置。 我也试图做一个简单的页面进行测试,但没有奏效。让浏览器更改比例尺的唯一机会是完全避免视口元标记,但随后它似乎随机缩放,大部分是缩小到非常小的范围。

这是一个非常简单的测试页:click

也许有人碰到这个问题就来了。我几小时内找不到解决方案...

谢谢!

回答

0

在一个新项目期间,我对这个主题做了一些更多的研究并找到了解决方案。它做我认为Android浏览器应该自己做的事情。

首先检查屏幕分辨率(宽度),然后通过JavaScript代码缩放网站。 我主要使用JQuery构建我的项目,所以我使用了它的一些功能。

检查屏幕的宽度:

newWidth = $(window).width(); 

你也可以使用原生的JavaScript(DOM)函数来获取宽度避免JQuery的。像window.width或innerwidth。不知道的心。

通过把屏幕的实际宽度与您的页面大小来计算缩放级别:

zoomlevel = newWidth/defaultWidth; 

然后调整屏幕的缩放级别:中

document.getElementById("wrapper").style.zoom = zoomlevel; 
document.getElementById("wrapper").style.MozTransform = 'scale('+zoomlevel+')'; 

“包装”课程是整个页面的一个div。如果您只想支持原生浏览器,并且在Firefox中测试时使您的页面看起来有点奇怪,则不需要MozTransform。

呼叫,当浏览器窗口大小调整验证码:

$(window).resize(function() { CODE }); 

本身我想你可以使用一个在onResize事件。

在Andoid-Browser,Mobile Safari和OS 6+的BlackBerry设备上,此工作正常。无法在Windows Mobile上测试它。

正如我在最后提到的那样,这只是我所期望的移动浏览器无论如何都会做的,但除了Safari之外,并没有这样做。