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

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">`

虚拟文件 http://www.baeldung.com/spring-handler-mappings

桌面视图： How do I set priority on Spring MVC mapping? https://mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo

移动视图：

更新

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

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

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

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

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