Issue with fluid-fixed layout on mobile browsers

StackOverflow https://stackoverflow.com/questions/21372483

题

I'm having issues getting my website to work correctly on mobile and desktop browsers.

I have a layout formatted like this:

<body>
    <div id="div1"><div class="container"></div></div>
    <div id="div2"><div class="container"></div></div>
    <div id="div3"><div class="container"></div></div>
</body>

Each of the div1, div2, and div3 have solid background colors and I want them to stretch to match the width of the browser, inside each of them I have a div with class "container" which has the attribute of width: 1000px;

I want all the content to be a width of 1000px but I want to the colored divs to stretch to match the width of the browser.

This works fine on desktop but I am running into issues on mobile. I am using HTML5 Boilierplate

you can see the issue if you pull up this link on a mobile device and compare it to opening it on desktop.: http://svth.azurewebsites.net/

有帮助吗？

解决方案

It sounds like you're trying to create a responsive design for your page. If this is the case there are a few things you should do to help you along this process. There are several really good web resources to help you with this.

Example 1 Example 3 Example 2

There is a lot to digest but it pretty much boils down to two things.

  1. keep your page flexible, all widths in either % or ems. So use width:80% instead of width: 1000px

  2. Use media queries to change your CSS for different screen sizes. In this case something for mobile sized screens.

其他提示

The issue is in your approach: fixing elements at 1000px and then displaying them in a window thinner than that will not look good, regardless of the device.

If you simply want the divs to match the width of the browser, yet stop at 1000 pixels wide, then replace your "width: 1000px;" in your .container CSS with "max-width: 1000px;"

If that is not your desired goal, let us know so a more specific answer can be provided.

Note that IE6 does not support the max-width attribute. If you care to support this browser, several workarounds exist. For example, you can include Respond.js and this extra CSS:

@media (min-width: 1000px) {
  .lt-ie7 .container {
    width: 1000px;
  }
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top