All geek questions in one place

IPhone Safari CSS Error

I have a small mobile app that weirdly works on iPhone / Mobile Safari. The page is displayed and works great when the orientation is vertical. When I rotate the phone horizontally, some, but not all elements on the page resize correctly. Some heading elements will remain almost the same size, possibly increasing by 10%, others will double.

Has anyone come across this? My first thought was that css might have a combination of sizes based on ems and px, but finding each size element and converting them to em doesn't change anything.

+2
source share
2 answers

This is because Mobile Safari on iPhone and iPod Touch automatically adjusts the font size.

You can disable it using the following CSS rule,

html {-webkit-text-size-adjust:none}

More information from the Safari Help Library

+11
source

Have you tried including the viewport meta tag, for example:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Otherwise, you can try to create orientation-oriented CSS styles and replace them with w / javascript when the orientation changes event, but I prefer the meta tag method above.

+7
source

Source: https://habr.com/ru/post/895143/

More articles:


All Articles