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

Posted 2021-05-06

我已经设置了网站。它应该显示为css设置。当我使用PC设备浏览时页面工作。（使用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">`

虚拟文件：https://mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo

桌面视图：

移动视图：

update:

在bootstrap.css中有一些67 @media

@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px)

我应该如何进行更改，以便在桌面和移动版本中看到相同的效果？

答案

对我来说，主要的问题是你正在使用一个响应式CSS框架（Bootstrap）与所有基于@media查询的行为，但你似乎不希望它的行为响应（你希望移动看起来像桌面）。

理想情况下，如果使用Bootstrap，您将构建页面，以便元素可以逻辑折叠以便在较小的设备上查看。如果您不想要这种行为，最好不要使用响应式框架，或者仅使用网格结构和基本元素样式，并避免使用响应式导航栏等所有其他更复杂的组件。

如果你真的想要阻止响应行为，Bootstrap主要基于.container元素的宽度来做这件事。解决这个问题的基本方法是强制.container元素具有固定大小，而不是使用@media查询进行更改，例如：

.container {
  width: 1170px !important;
  /* OR */
  min-width: 1170px;
}

宽度可以根据您想要达到的目标进行调整。

如果您从这开始，然后在检查器（例如Chrome开发工具）中处理代码，您可能会看到一些没有.container元素的其他Bootstrap组件（如导航栏）需要应用于顶部折叠元素的类似规则。

另一答案

虽然你没有在plnkr或jsfiddle上分享你的代码，但是看看你分享的图片，我试着为你编写一个语义html代码。

我相信这将为您提供有关如何使用bootstrap为响应式网站编写html的基本概要。

建议 - 永远不要更改bootstrap库css或js，在链接bootstrap后添加自定义css文件。

植物 - 管家