Why does my mobile device still treat my viewport as a desktop?

问题

I am doing a quick mobile version of my desktop site in bootstrap and running into some formatting issues. When I expand this view on my desktop, my icons show in a 3 by 4 grid just fine. When I narrow does the width of the window, the grid of images acts accordingly and narrows down to 1 column with all 12 images per row, with no horizontal side bar.

However, when I am viewing this on mobile, my my nav bar does not 'snap' to the width of the visible resolution per say and allows me to side scroll - even though the images are still aligned in 1 column of 12 images. The navigation acts as if it is being viewed on desktop and not on mobile despite the site clearly detecting that it is being viewed on mobile. It might be hard to replicated this in a fiddle without seeing this on mobile, but i included the fiddle to see if anyone can tell what I am talking about.

/*******GENERAL********/

*{
  box-sizing: border-box;
  margin: 0;
  zoom: 1; 
  font-size: 13px;
}

body{
    background: #f9f9f9 url(../img/crossword.png) repeat top left;
    font-family: 'Open Sans', Tahoma, sans-serif;
    max-width: 100%;
    background-color: #5F5E5E;
    font-size: 13px;
    color: #333;
    overflow-x:hidden;
}

Sorry I had to include code in the post to include fiddle, but the entire index and CSS are there. I added this to show that I hide x overflow in hopes that would rid mobile x-scrolling just like it did for desktop x-scrolling.

Fiddle here:

http://jsfiddle.net/09wfonqv/5/

Again, it looks fine on desktop - but when opened in mobile, this demo allows for horizontal scrolling throughout and doesn't show the images in a single column with the dropdown menu visible in only the display like I would like.

Thanks!

回答1:

You haven't set your viewport in the head. - that's a critical error!

Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head.

You also need to look into media queries.

Add @media screen and (max-width:480px) {your styles} and same for 768px to your css. (ipad) start there.

回答2:

You need <meta name="viewport" content="width=device-width, initial-scale=1">

Here is a guide on viewports for mobile devices Using the viewport meta tag to control layout on mobile browsers

来源：https://stackoverflow.com/questions/31596579/why-does-my-mobile-device-still-treat-my-viewport-as-a-desktop

标签

html

css

twitter-bootstrap

media-queries