HTML-Seiten Größe nicht auf iPhone/iPad im Portrait

Ich bin kein Profi-Web-Entwickler, und ich habe ein ähnliches Problem, unten, dass einige meiner Seiten nicht schrumpfen, um die Ansichtsfenster von mobilen Geräten im Hochformat zu passen . Landschaft scheint in Ordnung zu sein.HTML-Seiten Größe nicht auf iPhone/iPad im Portrait

Website Not Resizing Correctly on iPhone Portrait

Ich habe die Website haben Arbeits zuvor, das Ansichtsfenster Metatag verwendet, aber seit dem iOS-Update, das alles rückgängig gemacht zu eigentlicher Web-Größe. Ich entfernte die Basis Metatags auf diesen Rat (es ist nicht eine ansprechende Website)

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

Einige Seiten ordnungsgemäß funktionieren, und einige nicht. Das macht keinen Sinn! Das CSS ist auf allen Seiten gleich, aber sie werden unterschiedlich angezeigt: "BILDER", "WIE ES FUNKTIONIERT" und "PREISEN" verhalten sich alle korrekt. Die anderen Seiten bluten außerhalb des Ansichtsfensters. Irgendwelche Ideen?

Danke! Hier

http://funandson.com

ist der HTML-Code für die schlechte Seite:

<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>

Die CSS ist ziemlich normal zu:

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

Quelle

2016-04-26 James Mcnelly

-1

Sie sollten Bootstrap für responsive webdesign verwenden. Es ist einfach zu erlernen und Sie können schnell reagierende HTML-Seiten erstellen.

Nach dem Bootstrap einfügen <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> und den Inhalt Ihrer HTML-Seite in das Bootstrap-Grid-System zu wickeln.

Anfänger-Tutorial auf w3schools.

Quelle

2016-04-26 07:15:06 d4rty

Danke und ich stimme völlig zu. Alles, was ich in Zukunft tun werde, muss reaktionsfähig sein. In diesem Fall möchte mein Freund nur eine kostenlose Lösung, also denken Sie, dass es einen Grund für diese Anomalie gibt? –

Es gibt tatsächlich keinen Hotfix, so dass der HTML-Code auf allen Geräten reagiert, ohne ein Rastersystem zu verwenden. Sie brauchen eigentlich nur das Grid-System vom Bootstrap, das braucht nicht viel Zeit. Eine andere Option wäre W3.CSS, wenn Sie kein Bootstrap verwenden möchten. – d4rty

Sie sollten diese Frage schließen, wenn diese Antwort ausreichend ist. – d4rty

HTML-Seiten Größe nicht auf iPhone/iPad im Portrait

Antwort

Verwandte Themen