Opera mini 单列视图 css 布局问题

Question

我是响应式网页设计的新手，但在使用 opera mini 查看我的第一个网站时遇到了问题。我想问一下为什么当单列视图打开时，opera mini 会隐藏内容并改变我的宽度。我能做些什么来防止这种情况发生吗？我尝试了所有我知道的网页设计，但它仍然是一样的，除非那里有我不知道的技巧。

Answer 1

单列视图中的 Opera Mini 是一种特殊模式，顾名思义，它将在单列布局中转换 CSS 布局，并且经常故意破坏宽度。或者按照Opera：

单列视图转换网页以适应屏幕宽度。这样，您不必向左或向右滚动。

UCMini 代理浏览器的渲染类似。我相信这主要适用于非常小的屏幕，例如 240x360，并且历史上适用于功能手机，以便内容适合。我认为在这种情况下不值得过分担心美学。如果它隐藏元素。也许是因为它们在媒体查询断点之外，或者是通过js生成的。没有看到很难说。

要记住的一点是，Opera Mini 的视口宽度通常远小于您通常期望的默认设备宽度。视口大小还取决于文本大小。所以很复杂。说 320 像素的“正常”设备宽度，中等文本大小。 Opera Mini 的宽度默认只有 300px。

因此，如果您想很好地使用 Opera Mini，您确实必须计划 240 像素到 360 像素的宽度。并且每个 Opera recommendations:

将事物按逻辑顺序排列很重要，因为某些浏览器（包括 Mini）有时会折叠复杂的布局，因此它们会在屏幕上以单列显示

我遇到了一个错误，即单列视图中的 flexbox 行不会像应有的那样折叠成一列，并且 flexbox 布局变得混乱。