我在移动设备上显示的网页已更改和压缩（与桌面浏览器不同）

Question

我已经设置了网站。它应该显示为 css 设置。 当我转动 iPad 设备时，该页面可以正常工作。

但是，对于屏幕尺寸较小的设备，例如 5.5 英寸的智能手机。

网页结构已经完全改变和压缩了。

我在 HTML 中添加了以下代码。但是它不起作用。

有什么方便简单的方法可以让手机显示的页面和电脑浏览器显示的一样吗？

 <meta http-equiv="X-UA-Compatible" content="IE=edge">



    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">`

电脑版：

手机版：

Answer 1

我认为您可以通过使用 Javascript 将视图强制为桌面视图来解决此问题。

Answer 2

一个好主意是使用断点。基本上，它是这样工作的：

@media screen and (min-width: 500px) {
    /* Fill here with CSS styling */
}

@media 用于为不同的设备或屏幕宽度定义不同的样式规则。基本上，它告诉浏览器准备好设置断点。

screen 是告诉浏览器什么样的媒体将会改变的部分。

(min-width: 500px) 是实际的断点。任何屏幕宽度为 500 像素及以上的设备都将应用这些样式规则。另一种方法是使用max-width，它的作用正好相反。