android - 移动设备上显示的网页发生了变化和压缩(与桌面浏览器的区别)

Question

我已经设置了网站。它应该显示为 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

桌面 View :

移动 View :

更新:

在 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)

我应该如何更改才能在桌面版和移动版中看到相同的效果？

Answer 1

对我来说主要的问题是你正在使用响应式 CSS 框架 (Bootstrap) 和所有基于@media 查询的行为，但你似乎不希望它表现得响应式(你希望移动设备看起来完全一样桌面)。

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

如果你真的想阻止响应行为，Bootstrap 主要根据 .container 元素的宽度来做到这一点。解决这个问题的基本方法是强制 .container 元素具有固定大小，而不是随 @media 查询而改变，例如:

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

宽度可以根据你想要达到的效果进行调整。

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