HTML 设置Iphone视口 - MetaTag
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 设置Iphone视口 - MetaTag相关的知识，希望对你有一定的参考价值。
HTML 页面未在 iPhone/iPad 上纵向调整大小
【中文标题】HTML 页面未在 iPhone/iPad 上纵向调整大小【英文标题】：HTML pages not resizing on iPhone/iPad in portrait 【发布时间】：2016-04-26 07:11:23 【问题描述】：我不是专业的网络开发人员，我遇到了与以下类似的问题，因为我的一些页面没有缩小以适应纵向移动设备的视口。景观似乎很好。
Website Not Resizing Correctly on iPhone Portrait
我之前确实使用视口元标记使该网站正常工作，但自从 iOS 更新以来，它都恢复为实际的 Web 大小。我根据此建议删除了元标记（它不是响应式网站）
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
有些页面可以正常工作，有些则不能。这没有道理！ CSS 在所有页面上都是相同的，但它们的显示方式不同，“图像”、“工作原理”和“定价”都正常运行。其他页面在视口之外溢出。有什么想法吗？
谢谢！
http://funandson.com
这是坏页的 HTML：
<link rel="stylesheet" type="text/css" href="webfonts/MyFontsWebfontsKit.css">
<link href="source/style.css" rel="stylesheet" type="text/css" />
<meta name="description" content="FUN & SON - bespoke photography for kids" />
<title>
FUN & SON - bespoke photography for kids
</title>
</head>
<body bgcolor="#d0d0d0">
<div id="container1">
<div class="image">
<img src="images/header.png" name="background"/>
<h1>
<a href="aboutus2.html">ABOUT US</a>
<br />
<a href="images.html">IMAGES</a>
<br />
<a href="howitworks.html">HOW IT WORKS</a>
<br />
<a href="pricing.html">PRICING & PRODUCTS</a>
<br />
<a href="https://funandson2016.wordpress.com/">BLOG</a>
<br />
<a href="press.html">PRESS</a>
<br />
<a href="contact.html">CONTACT US</a>
<br />
<br />
<br />
<br />
<a href="https://www.instagram.com/funandson/"><img src="images/insta.png" name="dot"/></a>
<a href="https://www.facebook.com/Fun-Son-Bespoke-Photographic-Service-for-Kids-354285164695429/?ref=hl"><img src="images/fb.png" name="dot"/></a>
</h1>
<div id="copycontainer">
<h3>
<p style="margin-left: 60px; margin-top: 75px">
Coming soon
</p>
</h3>
<br />
<br />
</div>
</div>
</body>
CSS 也很标准：
#container
width:1200px;
#container1
width:1200px;
#container2
width: 770px;
float:left;
margin-top:95px;
margin-left:432px;
#copycontainer
width: 800px;
height: auto;
float:left;
margin-top:70px;
margin-left:360px;
.cover a:hover
text-shadow: 2px 2px: #ffffff;
.images
float: left;
padding-left: 10px;
padding-top: 10px;
.image
margin:auto;
position: relative;
width: 100%; /* for IE 6 */
.placeholder
background-color: #FF0;
margin-top: 10px;
margin-right: 10px;
padding-top: 0px;
float:left;
h1
font-family: CeraStencilPRO-Light;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 22px;
line-height:40px;
position: absolute;
top: 185px;
left: 0;
margin-left: 20px;
margin-top: 60px;
width: 100%;
z-index:-20000;
h2
font-family: CeraStencilPRO-regular;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 20px;
margin-top: 35px;
h3
font-family: Helvetica;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 16px;
margin-top: 35px;
line-height: 21px;
h4
font-family: CeraStencilPRO-Light;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 22px;
line-height:40px;
position: absolute;
top: 185px;
left: 0;
margin-top: 60px;
margin-left: 20px;
width: 100%;
h5
font-family: Helvetica;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 19px;
line-height: 21px;
【问题讨论】：
【参考方案1】：您应该使用引导程序进行响应式网页设计。它易于学习，您可以快速创建响应式 html 页面。
在包含引导程序后插入此<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 并将您的 html 页面的内容包装在引导程序网格系统中。
w3schools 的初学者教程。
【讨论】：
谢谢，我完全同意。我将来做的任何事情都需要做出响应。然而在这种情况下，我的朋友只是想要一个不花钱的修复，所以你认为这个异常有什么原因吗？ 实际上没有修补程序，因此 html 可以在所有设备上响应，而无需使用网格系统。您实际上只需要引导程序中的网格系统，这不需要太多时间。如果您不想使用引导程序，另一种选择是 W3.CSS。 当这个答案足够时，你应该关闭这个问题。 这个答案是不够的，因为它没有为问题中提出的问题提供解决方案。以上是关于HTML 设置Iphone视口 - MetaTag的主要内容，如果未能解决你的问题，请参考以下文章
过渡到 iOS 7：在 iPad 上查看的 jQuery/iPhone Web 应用程序的正确视口设置
如何使用 maven-publish 和 artifactory-gradle-plugin 生成 maven-metata.xml？