Hey. There were four questions on the layout for mobile devices.

1. On an old android with OS version 4.0.4 (Sony Ericsson mk16i, standard android browser), this effect is observed when turning the device into landscape-position:

Imgur

top Navbar with position: fixed turns into a strange white strip:

Imgur

What is it, where does it come from and how to deal with it?

2. iphone 4 doesn’t react to such a turn, leaving the navbar the same width as it was. I dealt with this bug with js, but is there any generally accepted approach to such things?

3. With sufficient resolution, a vertical sidebar is shown, also pinned using position: fixed. when zooming in, it also scales and closes the half-screen, while remaining fixed in place. Is there a way to place it relative to the window, not the viewport, without resorting to position: absolute or js? Bonus - which library is now fashionable to use to detect tablets / mobile phones on the client?

4. When filling in a form, the device automatically zooms in to facilitate the filling of this form. Is it possible at the end of filling (pressing enter, ok or similar) in some way to set the device to the previous scale (ie, does mobile device have an interface for working with scale and is there a suitable form editing completion event?).

It was decided to abandon the bootstrap for some reason, and there is simply no time to return to it.

  • bounty in 500 reputation for any answer that will help solve any of the problems! - etki

1 answer 1

1) A rhetorical question, without a code and device to answer, I think, is unreal.

2) Must comply with css media query landscape and portrait 100% verified

3) I use http://matthewhudson.me/projects/device.js/ in conjunction with:

@media screen and (orientation: landscape) { } @media screen and (orientation: portrait) { }

Also regarding the placement of the object relative to the window: I usually do .wrapper , which is position: fixed; width: 100%; height: 100%; position: fixed; width: 100%; height: 100%; with property -webkit-overflow-scrolling: touch; , and already inside it "molded" site.

4) No, just disable scaling completely: <meta name="viewport" content="user-scalable=no">

PS I do not pretend to have a perfect answer, I don’t chase a rating, I just share my own experiences with the author.

  • Great, I'll try. On the first question, there is about such a code for a diva wrapper: position: fixed; left: 0; top: 0; width: 100%; // tried right: 0; - the result is the same padding: 8px 13px> Must obey css media query landscape and portrait 100% verified It would be more detailed here. If I set two identical rules for landscape / portrait, will it still cause a redraw? - etki
  • 1. In theory, all the rules, the emulator in chrome behaves the same? There it is very convenient to play with styles, maybe, “right” for the wrapper, which block stands? I would try to parent overflow:hidden; if possible, and it is still useful for fixed elements to specify something of type transform: translate3d(0,0,0); very often eliminates unnatural behavior. 2. Whether it will be difficult to redraw, it is difficult for me to say, but the fact that styles are applied from another piece of CSS is for sure. - ferrari