Html iPhone优化的2页“应用程序”(网站)
我想创建一个网站,就像一个应用程序的行为。它非常简单,但我仍然不知道如何让它工作 这基本上是一个图像,当你从主屏幕启动应用程序时,它会显示出来。我需要以某种方式使地址和导航栏消失。当你点击图片时,它会显示下一张图片 我试过用这行代码Html iPhone优化的2页“应用程序”(网站),html,iphone,ios,css,Html,Iphone,Ios,Css,我想创建一个网站,就像一个应用程序的行为。它非常简单,但我仍然不知道如何让它工作 这基本上是一个图像,当你从主屏幕启动应用程序时,它会显示出来。我需要以某种方式使地址和导航栏消失。当你点击图片时,它会显示下一张图片 我试过用这行代码 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <!-- this is
<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导航栏和地址字段
有人知道我该怎么做吗
提前谢谢 尝试css样式
img{
max-width: 100%;
}
编辑
抱歉,我赶时间。您可以在css中设置图像的最大宽度,以避免图像比当前窗口宽:
img { max-width: 100%; }
<>您可能想考虑使用CSS框架,像或。它可以帮助您更轻松地创建响应性/移动友好型网站,尤其是使用网格系统和响应性ui元素