0

以下のサンプル画像、私のレイアウトを見ることができます... Web サイトは十分に機能します。ただし、コンテンツ部分の左側の画像を使用しました。

そのため、ノートブックやモバイルなどの小さな画面でアクセスすると、コンテンツ部分が画面に収まりません。画像の左側から見え始めます。そのため、コンテンツ部分が右側に少しはみ出し、他の 960 ピクセルの Web サイトとは異なり、コンテンツが画面に収まりません。150px幅の画像があるので右側に少しはみ出ています。

レイアウト

どうすればこれを解決できますか?

小さな画面でアクセスした場合、画像を表示する必要はありません。または..他の解決策はありますか？

編集：JsFiddle

JSFiddle

4

2 に答える 2

3

単にコンテンツをより狭い幅で表示できるようにします。

モバイル最適化の場合は、ズーム率を制御するためにいくつかのメタタグも追加する必要があります。

ここのように：

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

特別なcssルールを追加するには、ここでこれを試してください。

<style type="text/css" media="screen">
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 630px) {
    ...
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    ...
}
</style>
于 2012-05-29T13:50:09.280 に答える
2

CSS メディア クエリを使用して小さい画面サイズをターゲットにしてから、画像をコンテンツの下に移動するか、画像を完全に非表示にすることができます。ここで、display:none; で画像を非表示にする場合に注意してください。ダウンロードはできますが、単に表示されません。

于 2012-05-29T13:52:17.557 に答える