Layout of the page on small screens

问题

You can see the sample image below, my layout... The web site works fine enough. But I used an image on left side, out of the content part.

So, if visited via a small screen like notebook or mobile, the content part doesnt fit to the screen. It starts to show from left side of the image. So, the content part flows out on right side a bit and unlike any other 960 px website the content doesnt fit to the screen. It flows out a bit on right side because there is the image for 150 px wide.

How can I solve this?

No need to show the image if visited via small screens. Or.. is there any other solution?

Edit: JsFiddle

JSFiddle

回答1:

Simply allow to show your content with lesser width.

For mobile optimation you should also add some meta tags to control the zoom factor.

Like this here:

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

For adding special css rules try this here:

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

回答2:

You can use CSS media queries to target smaller screen sizes, and then either move the image below your content, or hide the image altogether. Now, keep in mind that if you hide the image with display:none; it will still download, but simply isn't displayed.

来源：https://stackoverflow.com/questions/10800447/layout-of-the-page-on-small-screens

标签

css

mobile