为什么CSS媒体查询无法在移动设备上正常工作,但在Google Chrome设备模拟器上有效? [英] Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?
本文介绍了为什么CSS媒体查询无法在移动设备上正常工作,但在Google Chrome设备模拟器上有效?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
从标题,我不明白为什么媒体查询在Google Chrome上的模拟器设备上工作,并且不能在真实的移动设备上正常工作。
As from the title, I don't understand why the media query works on emulator device on Google Chrome and it doesn't work on a real mobile device.
Html元标记
<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Css:
@media screen and (min-device-width:640px) and (max-device-width:767px){...}
其实我已经设置了从640/768/850/1024的移动设备屏幕分辨率的最小和最大分辨率,但似乎是一个错误,原因... I尚未了解
Actually I've set up the min and max resolutions from 640/768/850/1024 for mobile devices screen resolution, but it seems be an error, cause .... I don't understand yet
推荐答案
您应在元视口中应用设备宽度
You should apply device width in meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这篇关于为什么CSS媒体查询无法在移动设备上正常工作,但在Google Chrome设备模拟器上有效?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文