0

レスポンシブデザインで困っています。初めて作ってみた作品。

iPhoneでサイトを見ると、なぜか全体がズームインしてしまいます。

私が欲しいのは; デスクトップ サイトでは、ロゴは「.container」の左側に配置され、iPhone で表示すると、画像は真ん中に直接配置されます。

URL は次のとおりです: http://markpetherbridge.co.uk/peak。

これをhtmlヘッダーに追加しました：

 meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

これは関連する CSS です。

<div class="wrapper">
    <div class="container" id="header">
        <div id="peak-logo">
            <img src="img/peak-logo.png" alt="Peak Architects" />
        </div>
    </div>
</div><!-- end.Header !-->

私のデスクトップCSSは次のとおりです。

/* structure */

body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size:  16px;
color: #8d8c8c;
}

.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333; 
}

.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;

}

電話の CSS は次のとおりです。 @media screen and (max-width: 480px) {

body {

}
.wrapper {
    max-width: 480px;
}
.container {
    width: 100%;
    max-width: 480px;
}

#peak-logo {
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 200px;
    min-width: 480px;   
    margin: 20px 0;

}

}

実際の電話デバイスで表示すると、ブラウザーでは機能しないようです。

4

1 に答える 1

1

これは、@media screen が有効になったときに機能します。 http://jsfiddle.net/Enxu2/1/

最小幅が特定のピクセルに設定されているため、いくつかの問題があります。モバイル環境の場合は、ビューポートに適応できるように % を使用する必要があります。何かを width: 100% に設定したら、左右の余白とパディングを意識する必要があります。これは、要素をあるべき場所の外に移動し、ユーザーがページを完全に合わせるのではなくズームインおよびズームアウトできるようにするためです。 . 定義した境界線の外側にいくつかの要素がある場合、これを修正する簡単な方法は、一部の width:100% を width: 95% または 90% に変更してみてください。これにより、問題の原因となっている要素を確認できます。

提供された jsfiddle で、いくつかの幅とマージンを変更しました。これが正しい軌道に乗るのに役立つことを願っています！

#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%; 
}

.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}

また、画像がレスポンシブであることを確認する必要があるため、幅も % に設定する必要があります。画像の最大幅/高さがある場合は、max-width: または max-height: を使用して css でいつでも定義できますが、ビューポートに注意してください。

これが役立つことを願っています！

于 2013-06-26T16:46:06.183 に答える