Home/ Questions/Q 6992503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:38:33+00:00

Having a issue where all mobile devices is zoomed 50% in at start. That

  • 0

Having a issue where all mobile devices is zoomed 50% in at start. That is every device other than iPad. Tried to do a PHP check to scale 50% out if all other than iPad but when you moved from landscape -> portrait -> landscape it would then scale 50% out once again.

Here is 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 any width 100% only in px. Overall the content does not extend 640 width and 700 height.

Do anyone have any idea on how i could possible avoid this issue?

Edit

Came to the conclusion that @hakre was right about the scale of the pixels. My fix was to set every width in % rather than px. This way it auto sized no matter what. One thing to note is that i removed the scale. Reason why is that it seem to mess up the layout on some devices. Thanks once again @hakre

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    For a CSS device, these dimensions are either anchored (i) by relating the physical units [in, cm, mm, pt, pc] to their physical measurements, or (ii) by relating the pixel unit [px] to the reference pixel. [additions and highlight by me]

    If the reference pixel is half of the devices display’s physical pixel a CSS value of 700px will translate to be 350px on the display – or the said 50% in your question.

    So what you experience here is totally correct, the CSS is correct in the sense that you choose pxunits, you just have missed that a px in CSS is not the same as the pixel on the display. As it isn’t but you want it to be, it looks like you have chosen the wrong unit.

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

    Maybe you find a way to tell the browser to modify that reference pixel? This would solve your issue. Or now as you know what happens, detect the device and change the lengths accordingly.

    As an alternative you can replace your absolute lengths with relative ones (em, ex). As they are relative, you only need to change the length of the element they are relative to, to change the whole page.

    This is commonly done by using an absolute length on the <html> and/or <body> element and relative lengths for everything else.

    This approach might help you as well to solve the problem.

    • 0