手机上的响应宽度太小，但在桌面浏览器上还可以 [英] Responsive width is too small on phone, but okay on desktop browser

问题描述

我正在练习响应式网页设计.从我目前所学到的，它围绕着具有流体组件的流体网格和 CSS 媒体查询展开.

I am practicing responsive web design. From what I've learned so far, it revolves around a fluid grid with fluid components, and CSS media queries.

当我缩小浏览器时，网站看起来就像我希望它在手机上的样子:

The website looks just like how I want it to look like on a mobile phone when I shrink my browser:

然而，在我的手机上，放在我的网络服务器上后，它看起来完全不同:

However, when on my mobile phone, after being put on my web server, it looks completely different:

我认为正在发生的宽度和设备宽度之间存在一些冲突.有谁知道出了什么问题?

I think there is some conflict between width and device-width that is occurring. Does anyone know what is going wrong?

这是我加载样式表的方式:

This is how i load my stylesheets:

<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 600px), screen and (max-device-width: 600px)" /> 

推荐答案

没有viewport meta标签没有响应

There is not responsive without viewport meta tag

<meta name="viewport" content="width=device-width, user-scalable=no">

更多关于视口元标签 https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

这篇关于手机上的响应宽度太小，但在桌面浏览器上还可以的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！