CSS @media用于区分移动和桌面设备

时间:2017-01-08 17:09:19

标签: html css

我尝试使用@media为网站设置两种不同的样式。但无论我使用手机还是电脑,它总是会加载桌面视图。

/* desktop screen */
@media (min-width: 801px){
   content desktop
}

/* mobile screen */
@media (max-width: 800px){
  content mobile
}

我做错了什么?

(完整的CSS位于olli.ml

3 个答案:

答案 0 :(得分:1)

您问题的实际答案是:您使用widthdevice-width错误。改变第169行:

@media (max-device-width: 800px){

为:

@media (max-width: 800px){

如果您想专门定位手机,最好查看常用框架(如bootstrapfoundation)使用的媒体查询。您会发现许多广告的目标尺寸要小得多,例如320px480px,而不是代码中的800px

答案 1 :(得分:0)

问题是CSS媒体查询区分功能而不是设备。因此,您可以尝试确定哪些功能与您要引用的设备相对应。在this site中,您有针对iPhone,iPad的媒体查询。例如:

iPhone 6的肖像和放大器景观:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

这些查询尝试使用其功能减少使用特定设备的情况。在this site中,您有一组针对特定设备的预定义查询。

但请注意the difference between Desktop and Mobile可能不那么明显。

答案 2 :(得分:-1)

并且不要忘记将meta添加到<head></head>

<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />