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

Posted 2023-02-23

【中文标题】移动设备上显示的网页已更改和压缩（与桌面浏览器不同）

【英文标题】：The webpage shown on mobile device has changed and squeezed (difference from desktop browser)

【发布时间】：2018-07-23 06:57:45

【问题描述】：

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

桌面视图：

移动视图：

更新：

在 bootstrap.css 中有大约 67 个@media 像

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

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

【问题讨论】：

使用 CSS 查看@media 查询

@jonny 你的意思是我应该删除所有媒体查询？移除后有什么影响？

不，不要删除它们。我会根据您的需要调整它们

@Jonny 是否有任何简单的方法来覆盖代码以使移动布局最适合大多数移动设备？

@Jonny 请参阅#Update

【参考方案1】：

对我来说主要问题是您使用的是响应式 CSS 框架 (Bootstrap) 以及所有基于 @media 查询的行为，但您似乎不希望它具有响应式行为（您希望移动设备看起来完全像桌面）。

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

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

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

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

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

【讨论】：

现在我改为:` .container padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto min-width: 1170px; width: 1170px !important; @media (min-width:768px) .container width: 750px @media (min-width:992px) .container width: 970px 移动端视图看起来还是一样

真的很难说没有看到实际的网站代码你在做什么。我建议的一件事是您不要直接编辑 Bootstrap 样式 - 您应该在自己的样式表中扩展或覆盖。否则，很难确定哪些问题是由 Bootstrap 的默认样式导致的还是您自己的。

【参考方案2】：

虽然您没有在 plnkr 或 jsfiddle 上共享您的代码，但请查看您共享的图像，但我尝试为您编写语义 html。

我相信这将为您提供有关如何使用引导程序为响应式网站编写 html 的基本大纲。

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

Plnkr - http://embed.plnkr.co/jCbEtAnxoVDKi9ngSF1L/

【讨论】：

请查看虚拟文件：mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo

你可以试试jsfiddle.net/moonbb/o43wyxsz/2 但它只包含一个css文件。而且我只发布一个css文件-bootstrap.min.css

@evabb 抱歉，无法下载文件，但我建议您更改移动视图的外观。您可以参考我分享的代码，并以此为基础放入您的组件中。