混淆在“initial-scale = 1.0” - iphone 3GS vs 4 [英] Confused on "initial-scale=1.0" - iphone 3GS vs 4

问题描述

我在为移动设备正常缩放网站时遇到一些问题。

我们的网站设计为最小宽度为640像素，最大为随你。我目前有元标记：

 < meta name =viewportcontent =width = device-width; scale = 0.5，maximum-scale = 1.0; user-scalable = 1; /> 
  

现在 - 我困惑的部分是，如果我使用initial-scale = 1.0 ，显然该网站将缩放1：1，它会看起来肮脏的iphone 3Gs（将只看到一半的网站）。现在，在Iphone 4上（640像素宽的分辨率），如果我使用initial-scale = 1.0，它将以640像素正确缩放。

图形是480像素，3G需要scale = .667和iOS 4将需要1.3，正确？

那么，如何让网站完美地适应边缘？浏览器可以检测设备宽度，然后设置比例吗？有很多不同的设备宽度在那里... Android，老的iPhone，黑莓手机等。

获得相当frusterated :(感觉像我失去了一些重要的东西，应该已经知道了。

编辑似乎'初始尺度'元标记应该相对于视口缩放网站， width = device-width以设置实际视口大小。

我似乎遇到的问题是视口没有缩放到适合设备，它保持在640px不管我使用什么标签我在这里缺少什么???

解决方案

好吧，我想出来了。因为我的设计实际上是视口大小的两倍（排序），关键是只使用初始比例= 0.5。它工作原理正确地在两个设备（3G和4）上，以及或多或少正确地在Android设备上等。

有点棘手，似乎应该有一个更好的方法做到这一点，但目前，它的工作原理。

感谢所有提供输入的人。

I'm having some problems getting my website to scale correctly for mobile devices.

We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:

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

Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".

Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?

So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.

Getting quite frusterated :( Feel like i'm missing something important that I should already know.

Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.

The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???

解决方案

Ok, i've figured it out... essentially.

Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.

Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.

Thanks all who provided input.

这篇关于混淆在“initial-scale = 1.0” - iphone 3GS vs 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！