2

Hello guys I am using @media only screen and (max-width: 320px) (320 is not the only one is use) within CSS to assign different styles for mobile devices. However I find it troublesome when I actually check same website on the phone. While previewing it in Firefox on my desktop PC responsive preview, it looks like this:

enter image description here

However when I check it on phone it looks like this:

enter image description here

I understand that mobiles have higher resolution than 320 (which is applied on both preview screens). How do I reach results I want? (pic 1)

Another question is, is it safe to use vw and vh units for mobiles?

FoxyStyle
  • 177
  • 2
  • 12
  • My general answer would be: "insofar as possible, do not try to be more graphically-specific than you *must* be." Although the phone's interpretation of your markup superficially appears to be "quite different" from Firefox, the only *actual* difference is the size of the icons. (The horizontal arrow on the right margin, for example, is positioned at *exactly* the same "bright spot at the base of the trees.") If you try to arrange things so that "every device's interpretation of your markup is 'visually, exactly the same,'" then you wind up "micro-managing." Let the *device* have a say .. – Mike Robinson Jun 04 '15 at 03:27
  • What phone are you testing on..?.. because the use of "only" in your query may be the root cause of your issue... See: http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries – Zze Jun 04 '15 at 03:48
  • In reply to your other question, I personally use viewport scaling often, however note :https://github.com/scottjehl/Device-Bugs/issues/36 – Zze Jun 04 '15 at 03:51
  • Seem to fix things, anyone can give more information about it? – FoxyStyle Jun 04 '15 at 03:52
  • @MikeRobinson Saying that all different things are defined with pixels (like icons), and all stuff that are the right way (like that arrow position) are defined with %. however in this case, it is really hard to press these icons when they are too small, (they may get even smaller than on 2nd pic) and 2nd pic itself has really small icons, hard to use. Deeper into website there are many other problems caused by this. Any suggestion how to control pixel-based sizes? – FoxyStyle Jun 04 '15 at 08:00

1 Answers1

3

Again, to answer my own question;

  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
  <meta name="viewport" content="width=device-width">

This fixes the thing.

FoxyStyle
  • 177
  • 2
  • 12