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

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

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

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