iPhone/iPad上的HTML页面未按纵向调整大小_Html_Ios_Css_Iphone

iPhone/iPad上的HTML页面未按纵向调整大小

html ios css iphone

iPhone/iPad上的HTML页面未按纵向调整大小,html,ios,css,iphone,Html,Ios,Css,Iphone,我不是一个专业的网络开发人员，我有一个与下面类似的问题，我的一些页面没有缩小以适应移动设备的纵向视图。风景看起来不错我以前确实使用viewport元标记让该站点工作，但自从iOS更新后，它都恢复为实际的web大小。我根据这个建议删除了元标记（它不是一个响应性网站）有些页面工作正常，有些页面不正常。这毫无意义！CSS在所有页面上都是相同的，但它们的显示方式不同，“图像”、“工作原理”和“定价”都表现正常。其他页面在视口外部出血。有什么想法吗谢谢以下是错误页面的HTML： <l

我不是一个专业的网络开发人员，我有一个与下面类似的问题，我的一些页面没有缩小以适应移动设备的纵向视图。风景看起来不错

我以前确实使用viewport元标记让该站点工作，但自从iOS更新后，它都恢复为实际的web大小。我根据这个建议删除了元标记（它不是一个响应性网站）

有些页面工作正常，有些页面不正常。这毫无意义！CSS在所有页面上都是相同的，但它们的显示方式不同，“图像”、“工作原理”和“定价”都表现正常。其他页面在视口外部出血。有什么想法吗

谢谢

以下是错误页面的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" width="1200px" height="144px" 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" width="50px" height="50px" name="dot"/></a>
<a href="https://www.facebook.com/Fun-Son-Bespoke-Photographic-Service-for-Kids-354285164695429/?ref=hl"><img src="images/fb.png" width="50px" height="50px" 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>

您应该使用引导程序进行响应性Web设计。这很容易学习，您可以快速创建响应html页面

包含引导后，插入此

，并将html页面的内容包装到引导网格系统中

关于的初学者教程。

谢谢，我完全同意。我将来做的任何事情都需要有反应。然而，在这个例子中，我的朋友只是想要一个无成本的修复程序，所以你认为这种异常现象是有原因的吗？实际上没有热修复程序，因此html在所有设备上都是响应的，而不使用网格系统。实际上，您只需要引导中的网格系统，这并不需要太多时间。如果您不想使用引导，另一个选项是W3.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;
}