![Firefox dla Androida logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-37-28-a0d9f0_1.png)
Galaxy 6 zooms in on my website when in portrait - metatag <meta name="viewport" content="width=device-width, initial-scale=1">
I have a website which works in Firefox on a Samsung Galaxy tablet in portrait or landscape & on a Samsung Galaxy 6 Phone in landscape but Firefox zooms in when in portrait. The site works ok in Chrome all ways. It is only Firefox in portrait orientation that it zooms in so you can only see half the page width. Double tap and it zooms out to the correct size but if you refresh it zooms in again.
Wszystkie odpowiedzi (5)
If I put this in my HTML <meta name="viewport" content="width=device-width, initial-scale=1"> and these in my CSS @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width}
The galaxy tablet works fine in 3 browswers but the Galaxy S6 zooms in. In order to get the GS6 phone to function correctly I have to put <meta name="viewport" content="width=device-width, initial-scale=0.57"> The phone zooms out to the correct size but the tablet zooms out to about 2/3 size. and it seems that the css is being ignored
Zmodyfikowany przez Ricsee w dniu
and should I be using this in my css instead??? @viewport {
zoom: 1.0; width: extend-to-zoom;}
Firefox portrait zoomed in - further tests. This does not appear to be a Firefox problem but FF is worse. With this in my HTML <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="(max-width: 740px)" href="css/divtest.css"-->
in the BODY
/*DISPLAYS A ROTATING PICTURE IN LARGER DISPLAYS */
/*OR A FIXED PICTUE IN MOBILES AND DISPLAYS UP TO 740*/ div id="centertopmob" class="pcnodisplay"></div> div id="centertop" class="nodisplay"> <script src="../includes/picrotate2.js" type="text/javascript"></script> </div> (This page will not allow me to put the div left arrow at the beginning of the line so this is not a coding error)
and this in the css file divtest.css @-webkit-viewport{width:device-width;} @-moz-viewport{width:device-width;} @-ms-viewport{width:device-width;} @-o-viewport{width:device-width;} @viewport{width:device-width;}
body { width: auto;margin: 0 auto;padding: 0;border: 0;text-align:center;
font-family: arial, sans-serif, microsoft sans serif; font-size:16px; background-color: #000000; color:#FFFFFF;
} (For number 1,2,3,4,5 below these should be hash charater so not a code error))
- wrapper {position: relative; top:0; left:0; width: 630px; height:100%; text-align:left; margin:0 auto; background-color:#000000; font-family: arial, sans-serif, microsoft sans serif;}
- top { width: 100%; height: 165px; background-color: #000000;}
- logo {float:left; top:0px; height:165px; width:0px; }
- centertopmob {float:left; top:0px; height:165px; width:630px; background-image: url('../../images/toppics/hs06_sm3.jpg'); background-size: contain; background-repeat: no-repeat; margin: auto;}
- logorpic {float:left; top:0px; left:858px; height:165px; width:00px; }
.nodisplay { display: none;}
The above should be display a picture on a display up to 740 and a different picture on a display bigger than 740
In portrait mode it appears zoomed in so only 2/3 of the picture is visible. If initially loaded in landscape mode the picture is displayed correctly and when rotated to portrait mode 2 browsers (Chrome and 'Internet' whatever browser comes preloaded on a Galaxy S6) continue to display corectly but Firefox zooms in. Rotated back to landscape and all is well again until rotated back to portrait and FF zooms in.
Questions:
Why do all 3 browsers ZOOM in portait mode?
Are the CSS viewport commands being ignored?
Why is it correct if loaded landscape and rotated to portrait in 2 browsers?
Why does this not happen in Firefox?
Have I coded something incorrectly?
If I use the following in the css then Firefox continues to Zoom in portrait and be ok in landscape but the other 2 browsers start zooming in portrait AND landscape
@-webkit-viewport { zoom: 1.0; width: extend-to-zoom;}
@-moz-viewport { zoom: 1.0; width: extend-to-zoom;}
@-ms-viewport { zoom: 1.0; width: extend-to-zoom;}
@-o-viewport { zoom: 1.0; width: extend-to-zoom;}
@viewport { zoom: 1.0; width: extend-to-zoom;}
Zmodyfikowany przez Ricsee w dniu
OK further tests With the VIEWPORT METATAG removed from the HTML
THIS is being ignored by all browsers and the page appears tiny
@-webkit-viewport { zoom: 1.0; width: extend-to-zoom;} @-moz-viewport { zoom: 1.0; width: extend-to-zoom;} @-ms-viewport { zoom: 1.0; width: extend-to-zoom;} @-o-viewport { zoom: 1.0; width: extend-to-zoom;} @viewport { zoom: 1.0; width: extend-to-zoom;}
if I change the above for the following it still gets ignored by all browsers @-webkit-viewport{width:device-width;} @-moz-viewport{width:device-width;} @-ms-viewport{width:device-width;} @-o-viewport{width:device-width;} @viewport{width:device-width;}
only the METATAG seems to make a difference.
What I have found is that if you make your width in your CSS 100% and not to a value of px and set the meta viewport to device-width initial scale 1 then it works. (The css @viewport is still ignored though).
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="(max-width: 740px)" href="css/styles.css"--> The above sets the viewport to devicewidth and uses media query to call a stylesheet for devices that have a width up to 740px.
In the stylesheet your widths should be in percentages NOT in ems or pxs [hash]wrapper {position: relative; top:0; left:0; width: 100%; height:100%; text-align:left; margin:0 auto; } Use a second media query to call a stylesheet for wider devices or desktops.
I am still trying to figure out why these are ignored in the stylesheet (css) @-webkit-viewport{width:device-width;} @-moz-viewport{width:device-width;} @-ms-viewport{width:device-width;} @-o-viewport{width:device-width;} @viewport{width:device-width;}