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

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，这恰恰相反。