6

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

  • There is some answer elements here : http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page – Thomas Guillory Dec 19 '11 at 14:28
  • Yer, was going to say `` but your link has this – Mr Carl Dec 19 '11 at 14:33
  • No that is not the answer. Then you just disallow the user to scale the page. But as every device in my building sets the scale automatically without any user interaction this is not the solution. Thanks for trying anyways :) –  Dec 19 '11 at 14:36

2 Answers2

4

I've only tested this on Android's default browser and Opera Mobile, but it seems to work well. Still no way to disable zooming on Android's browser unfortunately...

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>
EpicMedia
  • 41
  • 1
1

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.

hakre
  • 193,403
  • 52
  • 435
  • 836
  • No that is not the issue. The thing is that the mobile browsers onload zooms 50% in. You can then zoom back out but the width/height of the elements is completely corrrect. A possible solution would be to either make it zoomed out at first or not zoom at all. Thanks for the writing but i already knew that :) My issue is simply that it seems to be in a zoomed state on load. The display of the elements is correct. –  Dec 19 '11 at 14:58
  • Just another input. Already have set width's for all elements and none of them expand this width. Thank you once more for giving it a try. –  Dec 19 '11 at 14:59
  • Is the *zoom* a CSS property in your case? If so, can you paste the client style sheet of it? Additionally are you aware of [CSS Device Adaptation](http://dev.w3.org/csswg/css-device-adapt/)? You might need to use a vendor specific module for that, it's still a draft. – hakre Dec 19 '11 at 15:06
  • I don't use the zoom property in css at all. Also tried out those viewport propertys but with no luck. The viewport is always 50% zoomed in at first no matter what i do. As the maximum scale is 1.0 and I'm able to zoom out at first it seems like the initial-scale property is not running correctly. If it was set to 1.0 from start and the user should be viewing 1 -> 1 pixel from start he/her should not be able to zoom out. But as he/her is it means the initial-scale is not set or is bugging. Any idea of what it can be? –  Dec 19 '11 at 15:49
  • I didn't mean that you use the zoom propery but the browser, that's why I asked for client CSS (not user or author CSS). So if you can display the inital CSS rules on that platform for your page, this would be good to know. Have no android at hand at the moment, if you know an offical android simulator I can run on my windows box here, drop me a link and I can take a look. – hakre Dec 19 '11 at 20:57
  • Came to the conclusion that you we're 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 for the help, updated question with conclusion. –  Dec 20 '11 at 14:07