iPhone 优化的 2 页“应用程序”（网站）答案

【问题标题】：iPhone optimized 2-page "app" (website)iPhone 优化的 2 页“应用程序”（网站）
【发布时间】：2013-10-11 16:02:34
【问题描述】：

我想创建一个像应用程序一样的网站。它超级简单，但我仍然无法弄清楚如何让它工作......

它基本上是当您从主屏幕启动应用程序时将显示的图像（我需要以某种方式使地址和导航栏消失）。当你点击图片时，它应该会显示下一张图片。

我试过这行代码

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

<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" href="images/template/engage.png"/>

图像是这样编码的

    <a href="xxx.html">
<img src="xxxx.png"/>
</a>

但问题是图像的大小没有根据 iphone 屏幕进行调整，它们变得更大，因此您必须滚动才能看到整个图片。

此外，每当按下图像链接时，都会打开一个新的 safari 窗口，其中包含 safari 导航栏和地址字段。

有谁知道我怎样才能做到这一点？

提前谢谢..

【问题讨论】：

标签： html iphone ios css

【解决方案1】：

您可以在 css 中设置图像的最大宽度，以避免图像比当前窗口宽：

img { max-width: 100%; }

您可能需要考虑使用 css 框架，例如 Bootstrap 或 Foundation。它可以帮助您更轻松地创建响应式/移动友好型网站，尤其是使用他们的网格系统和响应式 ui 元素。

【讨论】：

【解决方案2】：

试试css风格

img{
  max-width: 100%;
}

编辑对不起，我很着急。）

【讨论】：