HTML頁面沒有調整用iPhone/iPad在肖像

我無親web開發者，我有一個類似的問題在下面，在我的幾個網頁都沒有縮小以適合人像移動設備的視。景觀似乎很好。HTML頁面沒有調整用iPhone/iPad在肖像

Website Not Resizing Correctly on iPhone Portrait

我確實有該網站以前的工作，使用視元標記，但由於iOS的更新，這一切都恢復到實際的網絡規模。我刪除了基於這一建議的元標記（這不是一個負責任的網站）

http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

有些正常工作，而有些則沒有。這個不成立！ 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>

的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; 
}

來源

2016-04-26 James Mcnelly

-1

您應該使用引導爲響應網頁設計。這很容易學習，您可以快速創建響應式html頁面。

包括引導插入此<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">和包裝你的html頁面中的自舉電網系統中的內容後。

初學者教程w3schools。

來源

2016-04-26 07:15:06 d4rty

謝謝，我完全同意。我未來所做的任何事情都需要有所反應。然而，在這種情況下，我的朋友只是想要一個無成本的修復程序，所以你認爲這個異常是有原因的？ –

實際上沒有修補程序，因此html在所有設備上都可以響應而不使用網格系統。你實際上只需要引導系統的網格系統，這不需要太多時間。如果你不想使用引導程序，另一個選項是W3.CSS。 – d4rty

當這個答案足夠時，你應該關閉這個問題。 – d4rty

HTML頁面沒有調整用iPhone/iPad在肖像

回答

相關問題