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" />
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 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?
I am having strange issue. I completed a website and was using screenfly from quirktools to see how it would appear on tablets and smartphones..... it look fine
When I viewed the site on a smart phone or tablet in real, it was showing the site in desktop version ... media queries are not working ... I tried chrome, firefox, opera all on my phone but non of them is showing my site in mobile version.
Friends can you tell me what can possible be wrong ?
I am using simple media queries in my css file
Did you set a meta tag for the viewport? Something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Place this meta tag in between
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You can also Try out this meta tag which will make your media Query work on all size of devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thanks
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" />