CODEWITHSUNDEEP
cssresponsive-design
FoxyStyle
FoxyStyle

Reputation: 177

Responsive Design for mobiles with high resolution & small screen

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?

Upvotes: 2

Views: 1738

Answers (1)

FoxyStyle
FoxyStyle

Reputation: 177

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.

Upvotes: 3

Related Questions