I wanted to disable zooming on my Webpage.
Therefor I used this:
<meta name="viewport"
content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
This works just fine on my iPhone but when I try this with my LG Optimus 4x, I am still able to zoom!
Does anyone know a solution to this problem?
Related
My code for safe area is not working since I updated iOS to 14.5.
Code was perfectly working in my ionic 5 project with iOS 11.x with:
padding-bottom: env(safe-area-inset-bottom) !important; and in html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Now the issue is env(safe-area-inset-bottom) which is always resolved to 0 so there is no bottom padding on my phones iPhone 11 and iPhone 12. I guess that code can't detect notch area on iPhones anymore.
This was my mistake, I saw that code contains 2 meta tags, and somehow this code worked on safari 13 and not working on safari 14.
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
After the deleting second line of code safe are is working as usual.
To check if safe area and env() is working on your phone just open https://developer.mozilla.org/en-US/docs/Web/CSS/env() and check examples.
I am leaving this question here in case someone has similar issue.
I designed the web interface. It looks normal on the phone. The iPhone seems to be zoomed in as well. How can I fix.
I try -webkit-background-size:cover but it doesn't execute.
add this meta to your head;
<meta name="viewport" content="width=device-width, initial-scale=1">
I've designed a bootstrap 3 site and had tested it exclusively with chrome v40.
I then opened the site with Firefox 36. The layout was zoomed out and had gone all awry but after reducing the zoom to 80% it looked just like it did on chrome.
How can I handle this?
Try to add this to your index
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I'm working on a website right now, it's tiniglesias.com ... and everytime I try to use my iphone to check it, it is automatically zooming in.
I've already deactivated all of my plugins to check if any of it is causing this to happen, but it is still zooming in.
I've also tried using the meta tag
<meta name="viewport" content="width=device-width" />
Still not working.
Help would be greatly appreciated.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Update:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Hi I just started develop applications for mobile devices, Have the next trouble. This site: http://dimax.co.il/development/test-ding/OscarWilde/#/menu dispalyed correctly on PC browsers, but on Safari on iPhone 4S, it should be displayed full screen but it much less then full screen. All css you can see there. Thanks for help.
Ensure you have view port set in your head section
<meta name="viewport" content="initial-scale=1.0">
A more complete answer for mobile sites would be:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />