Question

我是整个HTML / CSS游戏的新手，只是寻找一些建议。所以基本上，当用户加载我的网站时，如果设备处于纵向模式，我想要一条消息，要求他们以横向方式查看它。我不会这适用于所有智能手机和所有平板电脑，但不适用于桌面屏幕。这可能吗？我知道它涉及@media查询，但我看到了很多不同的方法。你有任何建议的资源可以帮助我完成我的任务吗？

非常感谢！

Answer 1

如果您可以使用jquery（javascript），则会在方向发生变化时触发方向更改事件。在那里，您可以显示覆盖整个屏幕的“错误”消息。

这里有活动：jquery orientationchange event

如果您只需要在开头检查一次，就可以轻松完成：

if(window.innerHeight > window.innerWidth){
     //your code
}

Answer 2

我建议使用媒体查询来检测高而不是形状因子。大多数设备（iPhone和一些Android浏览器）不支持手持媒体类型。如果宽度不足以显示正常网站，您可以只显示不同的内容。

像这样的东西

<div id=main-content> <!-- your content goes here --></div>
<div id=not-wide-enough>If possible turn your device to landscape</div>

CSS

#not-wide-enough {
  display:none;
}
@media all and (max-width:300px) {
  #not-wide-enough {
    display:block;
  }

  #main-content {
    display:none;
  }
}

如果设备是美化环境，是否可以仅显示网站？

2 个答案: