0
にiPhone/iPadでリサイズない、と私は私のページの数は、肖像画で、モバイルデバイスのビューポートに合わせて縮小されていないという点で、以下に同様の問題を持っています。景色は良いと思われる。HTMLページは、私はプロのWeb開発者ですん肖像
Website Not Resizing Correctly on iPhone Portrait
私は、サイトがビューポートのメタタグを使用して、以前に働いていなかったが、iOSのアップデート以降、それはすべて、実際のWebのサイズに戻りました。私は（それが応答ウェブサイトではありません）
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
一部のページが正しく動作し、いくつかにはない、このアドバイスに基づいてメタタグを削除しました。意味がない！ CSSはすべてのページで同じですが、 'IMAGES'、 'HOW IT WORKS'、 'PRICING'の表示が異なります。他のページはビューポートの外に出ます。何か案は？
ありがとうございます！ここで
悪いページの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;
}
ありがとうございました。私は全く同意します。将来私がやることは応答性が必要です。この例ではしかし、私の友人はちょうどcostless修正を望んでいるので、あなたは、この異常のための理由があると思いますか？ –
グリッドシステムを使用せずにhtmlがすべてのデバイスで応答するような修正はありません。あなたは実際にブートストラップからグリッドシステムを必要としていますが、これは時間がかかりません。ブートストラップを使用したくない場合、他のオプションはW3.CSSになります。 – d4rty
この回答が十分である場合は、この質問を閉じる必要があります。それは問題の設定問題への解決策を提供しないよう – d4rty