混淆“initial-scale = 1.0” - iphone 3GS vs 4

我的网站在移动设备上正确缩放时遇到了一些问题。混淆“initial-scale = 1.0” - iphone 3GS vs 4

我们有一个网站，其设计的最小宽度为640px，最大不限。我目前的meta标签： - ：1，它会看起来蹩脚

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

现在我感到困惑的是，如果我用“初始规模= 1.0”，很明显，网站将调整1零件在iPhone 3Gs上（只会看到一半的网站）。现在，在Iphone 4上（640px宽的分辨率），如果我使用“initial-scale = 1.0”，它将在640px下正确缩放。或者，如果图形是480像素，3G需要scale = .667，而iOS 4需要1.3，对不对？

那么如何让网站能够完美地融入边缘？浏览器能否检测到设备宽度，然后相应地设置比例？有很多不同的设备宽度在那里......机器人，老年的iPhone，黑莓等

得到相当frusterated :(觉得我缺少的，我应该已经知道一些重要的事情。

编辑看起来'初始缩放'元标记应该是相对于视口缩放网站，然后使用width = device-width来设置实际的视口大小。

我似乎遇到的问题是视口不适合使用该设备，无论使用什么标签，它都保持在640px。我在这里丢失了什么？

来源

2011-08-22 Jonathan Coe

http://stackoverflow.com/questions/12723844/an droid-viewport-setting-user-scalable-no-breaks-width-zoom-level-of-viewpor/19430097＃19430097 – Habib

好吧，我理解了它...基本。

因为我的设计实际上是视口大小的两倍（排序），所以关键就是使用“initial scale = 0.5”。它可以在两个设备（3G和4）上正常工作，并且在Android设备上或多或少地正确运行等。

有点棘手，似乎应该有更好的方法来做到这一点，但暂时，有用。

感谢所有提供意见的人。

来源

2011-09-30 16:38:53

我有同样的确切问题，并使用相同的确切解决方案...我想知道如果你找到一个更好的方式来处理这个？ – jac300

接近2015年底，我想知道同样的事情，这仍然是最好的解决方案吗？它对我有用，但感觉很脏。我用0.67。我认为这个比例应该根据设备的像素密度而有所不同。这感觉不对，但没有其他的更好。 – Spencer

我相信答案是你想告诉网络浏览器总是将网站缩放到640像素。我甚至会关闭用户扩展网站的能力，以便流浪者不会重新规划一切。

试试这个：

<meta name="viewport" content="width=640; user-scalable=no;" />

来源

2011-08-22 20:02:16 profMobi

试过......没有工作......在'宽度'字段中没有任何工作。尝试过的设备宽度，尝试640，尝试320，没有什么改变网站的规模。只有初始比例可以做任何事情，但这仅仅是一种设备特有的，所以没有任何帮助:( –

+15

防止用户在移动设备上缩放页面是非常有用的。 – TravisO

使用固定像素宽度对我们最有效，但不要求可扩展的特性 –

“宽度”是告诉浏览器你的网站有多宽，放大率为100％。如果您将网站设计为流畅，您可以在此处指定“设备宽度”，并且浏览器不需要使用任何缩放，因为您的布局旨在适合任何视口宽度。

“初始缩放”用于覆盖某些设备的默认行为以放大或缩小您的网站，以使网站宽度（您在上面指定）与屏幕宽度相匹配。把它设置为1基本上是说：“不要缩放这个，如果我的网站太大了屏幕，使用滚动条，如果太窄，留下边的空白处”。如果您确实希望自己的网站准确填写屏幕宽度，请不要使用初始缩放比例。

来源

2011-11-09 12:21:21 londonwebguy

我认为原始邮件的主要问题是分号码不能在iPhone 4+上使用。它只适用于逗号作为分隔符（或者只有设备宽度设置）。其他浏览器似乎更宽容。

的我可靠以下工作：

<meta name="viewport" 
     content="width=device-width,initial-scale=1,maximum-scale=1" />

你还需要从横向滚动禁用的身体和文件：对Mozilla的网站的详细信息

body, html 
{  
    overflow-x: hidden;   
}

很好的链接：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

来源

2012-05-21 07:41:13

使用这个，但离开初始规模为我工作。当我旋转设备时发生了什么问题，我遇到了麻烦。 'width = device-width，maximum-scale = 1，user-scalable = no“，name：”viewport“' –

混淆“initial-scale = 1.0” - iphone 3GS vs 4

回答

相关问题