旋转到横向模式时移动网站变为桌面答案

【问题标题】：Mobile website changing to desktop when rotating to landscape mode旋转到横向模式时移动网站变为桌面
【发布时间】：2021-05-25 04:59:12
【问题描述】：

我正在使用@media screen and (max-width:768px) 更改我的网站在移动设备上的视图，但是当我旋转到横向模式时，它会更改为桌面网站，这意味着它会显示使用隐藏的内容 @media screen and (max-width:768px)。我怎样才能避免这种情况？

【问题讨论】：

您的问题不清楚。如果您的媒体查询最多适用于 768 像素，并且横向手机大于该尺寸，那么这种行为是正常的，对吧？更改您的媒体查询或更改您的期望。
您也可以使用orientation。也许像@media (min-width:768px) and (orientation:portrait), (min-height:768px) and (orientation:landscape) { ... }？
@OskarGrosser 我应该在这个媒体查询下为桌面还是移动编写代码
@yashthe 这只是这样一个媒体规则的示例，您应该使用最适合您需求的一个。通常最好让网站首先移动，这意味着首先设计移动版本，然后（使用媒体规则）更改布局以获得更大的屏幕尺寸。这意味着使用max-* 而不是我之前写的min-*。对不起，如果这令人困惑！

标签： html css

【解决方案1】：

@media screen and (max-width:768px){ ... } 所做的是，如果用户拥有的设备的屏幕宽度为 768 像素或更低（考虑到双倍像素密度等，但它会应用该块中的所有内容） )

因此，当您将手机侧向转动时，它的高度变成了它的宽度，并且由于大于768px，因此它不会应用您的“移动布局”。

一种选择是将768px 增加到更大的数字，甚至将一些规则拆分为更小和更高的宽度，例如为max-width: 640px 和max-width: 960px 设置规则

【讨论】：

我试着按照你说的做，但还是一样。我什至将最大宽度设置为 100px，但它仍然是一样的
检查您的屏幕尺寸以及是否存在其他冲突规则。请记住，您也可以随时从任何桌面浏览器检查您的移动布局，只要您调整窗口大小或使用他们的“响应式视图”，这样您就可以使用桌面网络检查器