I am in desperate need of help with this issue, can someone please provide guidance?
I am currently working on optimizing a webpage for mobile devices using CSS media queries. In the <head> section, I have included the following:
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
However, I am facing some challenges when testing the media queries:
1) While testing on my Huawei Ideos X1, which has a display width of 240px. Therefore, the CSS should be as follows:
@media (max-width: 240px) {
body: { background-color: red; }
}
but it's not having any effect.
2) I tried displaying the screen resolution on the <body> using JavaScript:
<div>
<script>
document.write(screen.width + 'x' + screen.height);
</script>
</div>
However, it shows "320x425". This is strange, as my mobile has a screen width of 240px, not 320px.
3) I thought about the possibility of mobile browsers auto-zooming to fit more content on the screen. So, I added two lines to the <body> with widths of 240px and 320px respectively, expecting both to fit without scrollbars:
<hr style="width: 240px;">
<hr style="width: 320px;">
To my surprise, the screen accommodated the 240px line but the 320px line went off the screen, causing a horizontal scrollbar to appear.
In summary: JavaScript and CSS seem to indicate a 320px screen width, but I can only fit 240px on the screen. This behavior is also observed on my friend's iPhone.
Please advise on where I might be going wrong. Thank you.
P.S. The test source code can be found here: http://pastebin.com/ULNm4RfW