為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Galaxy 6 zooms in on my website when in portrait - metatag <meta name="viewport" content="width=device-width, initial-scale=1">

  • 5 回覆
  • 6 有這個問題
  • 23 次檢視
  • 最近回覆由 Ricsee

more options

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.

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.

所有回覆 (5)

more options

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

由 Ricsee 於 修改

more options

and should I be using this in my css instead??? @viewport {

   zoom: 1.0;
   width: extend-to-zoom;}
more options

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))

  1. 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;}
  2. top { width: 100%; height: 165px; background-color: #000000;}
  3. logo {float:left; top:0px; height:165px; width:0px; }
  4. 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;}
  5. 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;}

由 Ricsee 於 修改

more options

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.

more options

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;}