css – 我的iPhone认为它是980px宽

前端之家收集整理的这篇文章主要介绍了css – 我的iPhone认为它是980px宽前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一组三个非常简单的媒体查询来处理一系列屏幕尺寸.这是我想出来的,经过一阵头痛:
@media all and (min-width: 0px) and (max-width: 480px)  { styles here }  
@media all and (min-width: 481px) and (max-width: 1023px)   {  styles here } 
@media all and (min-width: 1024px) {  styles here }

这与我在浏览器中的预期一样工作,但是当我指向我的iPhone时,它坚持显示中等大小的syles.玩数字时,我发现只有最大宽度为980px的iPhone才能响应该查询中的样式.

请注意,我对这些查询使用“all”来排除与“手持”或“屏幕,手持”等代码的任何关系.尝试简化以帮助我了解问题.

我认为这可能与我正在开发的页面内容有关,所以我创建了一个没有内容的测试页来试图解决这个问题.它在:

http://rgdaniel.com/test-mediaquery.php

如果我使用桌面浏览器查看该页面,那么当我调整窗口的大小和尺寸时,它的行为就像预期的那样.但是iPhone会以980px以下的任何指定的最大宽度报告我的“medium res”消息.任何帮助赞赏,谢谢提前.

解决方法

使用媒体查询时,您需要将其添加到头标.

< Meta name =“viewport”content =“width = device-width,initial-scale = 1.0”>

这允许网站检测到它正在设备上使用.

你也可以这样做,

< Meta name =“viewport”content =“width = device-width,initial-scale = 1.0,user-scalable = 0”>

这部分,user-scalable = 0;防止用户用手指进行缩放,如果您有位置:固定元素,则会很有用.

原文链接:https://www.f2er.com/css/217304.html

猜你在找的CSS相关文章