css responsive: 移动版答案

【问题标题】：css responsive: mobile versioncss responsive: 移动版
【发布时间】：2016-07-01 22:19:11
【问题描述】：

我是 CSS 新手，我正在使用媒体查询创建响应式设计。当我将浏览器的大小更改为 480px 或更小（@media only screen 和（max-device-width: 480px））时，设计工作正常，但是当我在移动设备上打开它或使用 chrome 上的切换设备工具栏时，它会运行太小了，我没有得到与带有小窗口的桌面相同的设计

是否缺少某些内容（其他媒体查询或其他内容）以使移动设备上的设计与桌面小窗口上的设计相同。

提前谢谢你

【问题讨论】：

对于桌面，可能是Toggle device toolbar 的问题。如果发生这种情况，只需刷新页面即可。

标签： html css mobile responsive-design

【解决方案1】：

您可以尝试将其添加到您的 HTML 中吗？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

我的猜测是缩放是你的问题。要么，要么您手机的实际分辨率宽度可能高于 480 像素。

我粘贴的代码行是Bootstrap 的一部分，它是最流行的 HTML、CSS 和 JS 框架，用于在网络上开发响应式、移动优先的项目。（引自他们的网站。不过我不反对）。

我建议看一下 bootstrap，因为它是由媒体查询制成的，并且确实适用于响应式网站。

【讨论】：