为什么我的移动设备仍将视口视为桌面? [英] Why does my mobile device still treat my viewport as a desktop?

问题描述

我正在引导中制作桌面网站的快速移动版本，并遇到了一些格式问题.当我在桌面上展开此视图时，我的图标以3 x 4网格显示就好了.当我缩小窗口的宽度时，图像网格将相应地起作用，并缩小到1列，每行所有12张图像，而没有水平边栏.

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.

但是，当我在移动设备上查看时，我的导航栏不会捕捉"到每个语音的可见分辨率的宽度，并且允许我侧向滚动-即使图像仍按12列的1列对齐图片.尽管站点清楚地检测到在移动设备上进行了浏览，但导航的行为就像是在台式机上而不是在移动设备上进行了查看.可能很难在手机上看不到小提琴来复制此内容，但我将小提琴包括在内以查看是否有人可以说出我在说什么.

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 ********/

/*******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;
}

对不起，我必须在帖子中包括代码以包括小提琴，但是整个索引和CSS都在那儿.我添加此代码是为了表明我隐藏了x溢出，希望能够像台式机x滚动一样摆脱移动x滚动.

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.

在这里拨弄

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.

谢谢！

推荐答案

您尚未将视口设置在头部.-这是一个严重错误！

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

在头部添加<元名称="viewport" content ="width = device-width，initial-scale = 1"> .

您还需要调查媒体查询.

You also need to look into media queries.

将@media屏幕和(最大宽度:480px){您的样式}添加为768px，并添加到您的CSS中.(ipad)从那里开始.

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

这篇关于为什么我的移动设备仍将视口视为桌面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！