The webpage shown on mobile device has changed and squeezed (difference from desktop browser)

Question

I have setup the website .It should show as the css setting . The page works when I use the PC device to browse .(it is squeezed a bit when using IPAD )

However , for the smaller screen size device ,like 5.5 inch smart phone .

The webpage structure has been totally changed and squeezed .

I have added the below code in the HTML .But it doesn't work .

Any convenient and simple way to make the page shown with mobile device ,as same as the page shown using computer browser ?(won't destroy my original web layout format)

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 
  
    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">`

Dummy files: https://mega.nz/#!rJxWjQia!aYv4Ayi2yAnnIGFezRx92SJcaM-I9SOQAl-FL1g0_wo

Desktop View:

Mobile View:

update:

there are some 67 @media in the bootstrap.css something like

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

How should I make change so that I can see the same effect in both desktop and mobile version ?

Answer 1

The main issue to me is that you're using a responsive CSS framework (Bootstrap) with all the @media query based behaviour, but you don't seem to want it to behave responsively (you want mobile to look exactly like desktop).

Ideally if using Bootstrap, you'd structure the page so elements can collapse logically for view on smaller devices. If you don't want this behaviour, it may be better not to use a responsive framework, or only use the grid structure and basic element styling, and avoid all the other more complex components like the responsive navbar.

If you really want to prevent the responsive behaviour, Bootstrap does this primarily based on the width of .container elements. The basic way to get around that is to force .container elements to have a fixed size, rather than change with the @media queries, e.g.:

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

The width can be adjusted depending on what you want to achieve.

If you start with this then work through the code in an inspector (e.g. Chrome Dev Tools) you'll probably see a few other Bootstrap components without .container elements (like the navbar) need a similar rule applied to the top collapsing element.