Geek Answers Handbook

VH, VW and Crazy IOS Mobile Browser Rendering

I thought it would be nice to use relative units to start a new project. When I worked on this, I checked the chrome emulation to make sure everything worked well on these devices, and it looked good.

Then I pushed him to the hero, and it looked good on my macbook, but when I really downloaded it on my iPad, I wanted to throw it out of the window ...

#bannerTop { position:relative; text-align: center; width:100vw; height:70vh; min-height: 70vh !important; max-height:70vh !important; background-image: asset-url('skycloudsalpha.jpg'); background-repeat: no-repeat; background-position: 50% 75%; z-index:-1; }

I use VH units. I suspect this could be a problem?

Some other problem may occur, but I'm not sure how to debug my problem, because everything looks good on the emulator, but not on the device itself. I have spent about three hours on this now and really appreciate some help.

Thanks!

+8
html css ios ipad viewport-units
source share
1 answer

How can you read caniuse.com

Partial support in iOS7 is due to a "vh" block error.

known issues:

  • Chrome does not support viewing units for border widths, column spaces, conversion values, shadow shadows, or in calc () prior to version 34.
  • Safari iOS (both 6 and 7) does not support viewport blocks for border widths, column spaces, transform values, field shadows, or in the calc () method.
  • iOS 7 Safari sets the unit of view to 0 if the page is left and returns after 60 seconds.
  • Internet Explorer 9 interprets vh as pages in print mode. 30vh = 30 pages
  • iOS 7 Safari recounts the widths set in vh as vw, and the heights are set in vw as vh when the orientation changes.

Additional error behavior information

http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

And polyfill https://github.com/rodneyrehm/viewport-units-buggyfill

+13
source share

More articles:


All Articles