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

这一生的挚爱 提交于 2021-01-28 00:54:43

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!