The site was originally written for a static size of 1200px. Over time, the designer drew 3 options: 1920, 800 and 320 nx. For the size of 1920px, I did not redo anything, I used what was under 1200.

Here is the structure of my css:

//Сначала старые стили, их использую если размер больше 800px @media only screen and (max-width: 800px) { //здесь стили для экранов не больше 800px } @media only screen and (max-width: 320px) { //здесь стили для экранов не больше 320px }

On the laptop, everything is working fine, adaptability did more rubber if you can call it that. When you change the browser screen - the view changes. But the task was to ensure that the site was displayed normally on tablets and smartphones . But now in modern mobile devices the resolution is often greater than the resolution of laptops, I am talking about HD and FHD. The site on a smartphone with a resolution of FullHD is displayed both on the computer and not readable. Is it possible to somehow display on the phone with a resolution of the screen width of 1920 content like for a monitor with a resolution of 320 or 800? Or how to solve this problem? I would not want to rewrite css again

1 answer 1

It is necessary to set the viewport so that the 640 phones think that they are 320px. I'm worth it:

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  • Thank you for what the doctor attributed. On full HD in the vertical position gives 320, and in the horizontal 800 - Igor Baranyuk
  • one
    Only I would not turn off the ability of users to scale ....... - pepel_xD
  • Ok, I'll clean it up. The customer wants the resolution on smartphones to be as 320, and on tablets as for 800. But it turned out that on a smartphone with full HD and HD, the resolution is greater than 320 and the design for 800 is displayed (if you raise the bar from 320 to 400 in the media query then this design is displayed on the smartphone, that is, the smartphone determines in the range from 320 to 400). I understand this is all relative and for different smarts with the same resolution but different screen sizes, the design can be different and everything depends on dpi. - Igor Baranyuk
  • one
    Do rubber, I came to something like this: phone vertically <450, phone horizontally <800, tablet vertically <900, tablet horizontally> 900 - Artem Gorlachev