search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.88k stars 78.88k forks source link

Rendering issue on tablet going from landscape to portrait to landscape #4667

Closed adetwiler closed 12 years ago

adetwiler commented 12 years ago

I think there is a bug with the responsive media queries. I viewed the Boootstrap site (http://twitter.github.com/bootstrap/) on my Galaxy Tablet 10.1. When I bring the site up in Landscape it looks great. When I flip to Portrait it looks great. When I flip back to Landscape the header maintains the Portrait width. It doesn't snap back to Landscape. I tested this on an iPad 2 and it does the same thing. I also tested 2 sites that were designed with Bootstrap and it does the same thing. Has anyone else noticed this issue?

Note: This only happens on a tablet. Smartphone portrait and landscape widths work great.

natansh commented 12 years ago

Seems like the tablets mess up the scaling part. There's a known iOS bug for this behavior - and a fix https://github.com/scottjehl/iOS-Orientationchange-Fix . Can you please check out the demo on that page to see whether it's actually the case?

thezoggy commented 12 years ago

check your header, initial-scale being defined is prob the culprit. this is widely documented...

thezoggy commented 12 years ago

do you have something like

<meta name="viewport" content="width=device-width; initial-scale=1;">

if so... go remove the inital-scale=1, its a known bug https://github.com/h5bp/html5-boilerplate/issues/824

natansh commented 12 years ago

@thezoggy Doesn't adding maximum-scale=1 prevent zooming?

thezoggy commented 12 years ago

@natansh yes, http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

since @adetwiler didnt give us an example, I just put an example down to state what the bug was.. not what he should or shouldnt be using. but i'll remove that part so there isn't any confusion

adetwiler commented 12 years ago

I should also add that this didn't do this in previous versions of Bootstrap, I will do what you suggested tonight and see if it is fixed. In the meantime here is a screenshot of what it looks like on the Galaxy Tablet.

http://tinypic.com/r/dc5zia/6

mdo commented 12 years ago

Closing out until we get more info on what's causing it as I've yet to see this myself, nor many others report it.