Clever Geek Handbook

Should browsers not show mobile content outside of content boundaries?

To illustrate my problem, take a look at the following fiddle: http://jsfiddle.net/ECaD6/

Pretend I made this web page where the center (dark gray) area is the main content of the page. The background of this content area is intentionally different from the color of the container, which contains no content.

I have positioned the image absolutely so that it lies outside the intended content area. This works and looks good in a desktop browser.

However, when viewed in a mobile browser, the user can zoom out on the page so they can see this:

enter image description here

I would love it if the browser could only scale down to the width of the content container. Is it possible? I could obviously bet overflow-x:hidden

on div

, but then it would actually cut off the soccer ball completely.

It would be nice if the mobile browser could just zoom out: enter image description here

I know that technically the image (in this case) is part of the "content" since it's in the content div. I am wondering if there are any layouts or css tricks that can be used to achieve what I am looking for.

+3


source to share


2 answers


Have you added a meta

device-width

tab to your title?



0


source


Add this meta tag to <head>

your page.



<meta name="viewport" content="initial-scale=1, maximum-scale=1.0, user-scalable=no" />
0


source






More articles:


All Articles