开发者

How do I create a full-browser-width bar without screwing up zoom on an iPhone?

开发者 https://www.devze.com 2023-04-13 05:37 出处:网络
I am trying to create bars of color that stretch all the开发者_C百科 way across the screen as http://css-tricks.com/9443-full-browser-width-bars/ and it is not possible to rearrange the DOM to make th

I am trying to create bars of color that stretch all the开发者_C百科 way across the screen as http://css-tricks.com/9443-full-browser-width-bars/ and it is not possible to rearrange the DOM to make this easier.

The technique is awesome on desktop browsers, but on mobile WebKit overflow-x is not hidden and you can zoom way, way out or scroll over to parts of the page that only contain improbably-wide color bars. It doesn't help to set the viewport.

How do I get this effect without screwing up the zoom?


Have you tried to adding overflow-x: hidden; to the parent element of the scroll-bars? I have found this technique useful when developing for webkit based mobile browsers.

<body>
    <div id="wrap" style="overflow-x: hidden;">
        <div id="massive_coloured_bar" style="your full-width technique here"></div>
    </div>
</body>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号