All geek questions in one place

HTML / CSS - Mobile scaling at startup

There is a problem when all mobile devices increase by 50% at startup. These are all devices except the iPad. Tried to do a PHP check to scale 50%, if everything except the iPad, but when you moved from landscape → portrait → landscape, then it scales again by 50%.

Here are my current meta tags:

<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

My HTML does not use 100% width in px only. In general, the content does not apply to widths of 640 and 700.

Does anyone have any ideas on how I can avoid this problem?

Edit

I came to the conclusion that @hakre was right about the pixel scale. My solution was to set each width to%, not px. Thus, it automatically depends on the size. It should be noted that I deleted the scale. The reason is that this seems to ruin the layout on some devices. Thanks again @hakre

+6
source share
2 answers

In CSS, px is an absolute length block . They are mostly useful when the output environment is known.

For a CSS device, these dimensions are either tied (i), linking the physical units [in, cm, mm, pt, pc] with their physical dimensions, or (ii) linking the pixel block [px] to the reference pixel . [add and highlight]

If the reference pixel is half the devices displaying the physical pixel, a CSS value of 700 pixels will be displayed as 350 pixels in the display, or 50% in your question.

So, what you feel here is absolutely correct, CSS is correct in the sense that you select px units, you just skipped that the px in CSS does not match the pixel on the display. Since this is not the case, but you want it to be, it looks like you have chosen the wrong unit.

Again: absolute length units are mostly useful when the output environment is known.

Did you find a way to tell the browser to change this reference pixel? This will solve your problem. Or now that you know what is going on, identify the device and change the length accordingly.

Alternatively, you can replace your absolute lengths with relative (em, ex). Since they are relative, you only need to change the length of the element to which they refer to change the entire page.

This is usually done using absolute length in the <html> and / or <body> element and relative lengths for everything else.

This approach can help you solve the problem.

+2
source

I tested this only in the default Android browser and in Opera Mobile, but it seems to work well. Unfortunately, there is no way to disable scaling in the Android browser yet ...

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="target-densitydpi=device-dpi" /> <meta name="HandheldFriendly" content="true"/>
+4
source

Source: https://habr.com/ru/post/904083/

More articles:


All Articles