iphone - 在 iPhone 上查看网站 - 尺寸问题

标签 iphone css zooming crop

我希望有一个相对简单的解决方案。我为客户端创建了一个简单的网站,该网站在所有浏览器中按预期显示。为该元素开发一个单独的移动网站不属于工作范围,但我希望该网站能够在现代移动浏览器上正确显示。目前,在 iPhone 4 上,1000 像素宽的容器的左侧被裁剪(可能被裁剪了 10 像素),我根本无法向左滚动查看它。我想知道这是 CSS 问题还是某种缩放问题?网址可访问here .

我很难找到与该问题相关的任何资源,但确实找到了以下代码片段:

<meta name="viewport" content="width=device-width; initial-scale=0.9;">

这可能是解决方法的开始吗?如果网站加载时默认缩放为 75%,我会很高兴,但我没有为移动设备编码的经验。

最佳答案

因此,对于我的具体情况,我找到了一个可行的解决方案。希望这对处于类似情况的其他人有所帮助。

事实上,关键在于视口(viewport)元标记。我正在使用一个网页,其内容仅限于居中的 1000 像素 x 600 像素容器。 THIS文章对于解决这个问题非常有帮助。

正如文章所述,“默认情况下,iPhone 上的 Safari 会像大屏幕上的桌面浏览器一样渲染您的页面,可用于网页内容的宽度为 980 像素。然后它会缩小内容,以便它适合小屏幕。”

就我而言,固定宽度为 1000 像素,左侧被裁剪掉了 20 像素,并且无法平移到它。诀窍是设置自定义宽度(如果需要,还可以设置高度)。 请务必在垂直和水平 iPhone 方向上检查该网站。您还可以与此元标记一起使用其他参数,但我已将其保持简单。

这是我在 <head></head> 之间包含的代码网站标签:

<meta name="viewport" content="width=1050px, height=650px" />

这在网站内容周围提供了 25 像素的白色边框,并且仍然允许缩放等。这不能替代 iPhone 特定网站,但它确保用户能够访问网站的所有内容.

希望这有帮助!

关于iphone - 在 iPhone 上查看网站 - 尺寸问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10756121/

相关文章:

iphone - 我如何获得以某个字符串开头的 NSMutableDictionary 的键

iphone - 使用touchesmoved 时Touchesbegan 总是会触发?

html - 我可以在 IE8 中为 <td> 创建 CSS 渐变背景吗?

javascript - 使用 jQuery 和 Bootstrap 而不是使用基本的 HTML 创建数据表

android - 如何在 Android 中以编程方式放大图像?

javascript - 使用 View 图像而不是使用以下代码缩放图像

c# - 老大说 "We need an IPhone app",类似iPhone上的Firefox、JQuery、模板、数据链接的框架有哪些?

iphone - 使应用程序兼容 iOS 5 是否存在一些常见问题?

html - 如何使用 CSS 编辑下拉滚动条?

python - pyplot 放大