对“initial-scale=1.0"感到困惑；- iphone 3GS vs 4 [英] Confused on "initial-scale=1.0" - iphone 3GS vs 4

问题描述

我在为移动设备正确缩放网站时遇到了一些问题.

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

我们的网站设计为最小宽度为 640 像素，最大宽度不限.我目前有元标记:

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;" />

现在 - 我感到困惑的部分是，如果我使用initial-scale=1.0"，显然该站点将按 1:1 缩放，并且在 iphone 3Gs 上看起来很糟糕(只能看到一半的站点).现在，在 Iphone 4 上(具有 640 像素宽的分辨率)，如果我使用initial-scale=1.0"，它将在 640 像素处正确缩放.

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".

或者，如果图形是 480px，3Gs 需要 scale=.667 而 iOS 4 需要 1.3，对吗?

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

那么您如何让网站完美地适应边缘到边缘?浏览器可以检测设备宽度然后相应地设置比例吗??有很多不同的设备宽度......安卓、旧款 iphone、黑莓手机等.

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.

编辑似乎初始缩放"元标记应该相对于视口缩放站点，然后使用 width=device-width 设置实际视口大小.

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.

我似乎遇到的问题是视口没有缩放以适应设备，无论我使用什么标签，它都保持在 640 像素.我在这里错过了什么???

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.

因为我的设计实际上是视口大小的 2 倍(有点)，所以关键只是使用初始比例 = 0.5".它在两种设备(3G 和 4)上都能正常工作，在 android 设备等上或多或少能正常工作.

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屋！