html – 手机上的响应宽度太小,但在桌面浏览器上没问题

前端之家收集整理的这篇文章主要介绍了html – 手机上的响应宽度太小,但在桌面浏览器上没问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在练习响应式网页设计.从我到目前为止所学到的,它围绕着一个流体网格,包含流体组件和CSS媒体查询.

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

但是,在我的手机上放入我的网络服务器后,它看起来完全不同:

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

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

<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)" />

解决方法

没有视口元标记就没有响应
<Meta name="viewport" content="width=device-width,user-scalable=no">

有关viewport元标记https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag的更多信息

猜你在找的HTML相关文章