I'm currently working on a mobile version of a website which works great in the default browsers like Firefox &铬合金。 Base is a fluid layout with a media query for a max width of 440px (@media screen and (max-width: 440px)to target portrait mode.
Font sizes are changing in the default browsers together with some other settings like smaller images and divs etc. However when I test the site on my HTC Android phone with the default browser it only shows the max width 440 style instead of the normal style which is based on a width of 480px.
What could be the problem for this behaviour? The mobile version can be found on httpp://www.seeyouzoeningouda.nl/m
Haven't posted the CSS because I really don't know which part of the code to show you. The css is based on the default HTMl5 boilerplate template (www.html5boilerplate.com)
I'm currently working on a mobile version of a website which works great in the default browsers like Firefox & Chrome. Base is a fluid layout with a media query for a max width of 440px (@media screen and (max-width: 440px)to target portrait mode.
Font sizes are changing in the default browsers together with some other settings like smaller images and divs etc. However when I test the site on my HTC Android phone with the default browser it only shows the max width 440 style instead of the normal style which is based on a width of 480px.
What could be the problem for this behaviour? The mobile version can be found on httpp://www.seeyouzoeningouda.nl/m
Haven't posted the CSS because I really don't know which part of the code to show you. The css is based on the default HTMl5 boilerplate template (www.html5boilerplate.com)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您使用什么移动设备进行测试？
如果它们是三星 Galaxy s3 或苹果 iPhone 4，那么它们的设备分辨率已加倍，因此这可能是媒体查询不起作用的原因。
因此，对于 I-phone 4，尝试将最大宽度从 480 像素加倍到 960 像素，对于三星 Galaxy s3，如果在编写媒体查询时将最大宽度从 360 像素加倍到 720 像素，那么它可能会工作得很好。
例如。
@media手持设备，屏幕和（最大宽度：960px）
@media 手持设备、屏幕和（最大宽度：720px）
我认为这可能会帮助您定位纵向模式。
What mobile devices have u used for testing ?
If they are samsung galaxy s3 or apple iphone 4 then their device resolution has been doubled and hence this might be the cause for media queries not working.
So for I-phone 4 try to double the max-width from 480px to 960px and for samsung galaxy s3 if u double the max-width from 360px to 720px while writing the media query then it might work perfectly fine.
eg.
@media handheld, screen and (max-width: 960px)
@media handheld, screen and (max-width: 720px)
I think this might help you to target portrait mode.
移动设备有时会成为
@media手持设备的目标。尝试使用@media all而不是 screen。Mobile device are sometimes targeted by
@media handheld. Try using@media allinstead of screen.