浏览器和移动设备中的不同输出 - 相同的 css答案

【问题标题】：Different outputs in browser and mobile - same css浏览器和移动设备中的不同输出 - 相同的 css
【发布时间】：2016-05-13 21:00:48
【问题描述】：

好的，第一次发帖，该网站的长期用户（在谷歌搜索线索时）。

我刚刚开始编码，并制作了这个网站（全部使用纯 HTML 和 CSS - 在 Bootstrap 中制作了一个，但不喜欢可用性 - 稍后将测试 Foundation 和 Sass+Susy）。

但我有两个愚蠢的（我相信）问题。

首先：无法使一个 css ref 在移动和浏览器窗口上工作（在同一外部 css 的 html 上有两个条目）。准备好正确使用媒体查询，但根本做不到。一些关于只有一个媒体查询对两者都有效的指针会很好。

第二：即使使用相同的 css（顺便说一句，还需要一些工作），在移动设备大小中，我在 Chrome Iphone 模拟器中打开网站或只是重新调整浏览器窗口时得到了不同的结果？我怎样才能解决这个问题？

提前谢谢，对不起我的英语。如果需要，请询问，我会发布相关代码（但对于我在这里看到的，托管页面可以）。

【问题讨论】：

标签： html css

【解决方案1】：

这是一个有点笼统的问题。不同的浏览器呈现不同的东西，但通常在一个合理的范围内。跨现代浏览器呈现的主要差异通常是由于缺少适当的前缀代码。如果是这种情况，您可以尝试https://autoprefixer.github.io/ 之类的方法。

如果您指的是在移动设备宽度上重叠的 <H1> 元素，则它是 padding:1em;那就是将文本压在一起。相反，您可以尝试使用% 替换em。

【讨论】：

【解决方案2】：

发现了问题。正如我发现的那样，Iphone 浏览器进行了一些奇怪的调整大小。所以我只是添加

<meta name="viewport" content="width=device-width,initial-scale=1">

一切都按预期进行。该死，也许这就是为什么框架不是一个坏主意的原因：P

无论如何感谢您的帮助。

【讨论】：