浏览器和手机中的不同输出 - 相同的css

Question

好的，第一次海报，网站的长时间用户（当谷歌搜索线索时）。

我刚刚开始编写代码，并且创建了这个网站（所有这些都在纯HTML和CSS上 - 在Bootstrap中做了一个，但不喜欢它的可用性 - 稍后会测试Foundation和Sass + Susy）。

http://limakeppler.com.br/teste/areas.html

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

第一：不能让一个CSS引用在移动和浏览器窗口上工作（对于同一个外部CSS，在HTML上有两个条目）。准备好适当的媒体查询使用情况，但无法完成。只有一个媒体查询适合这两种工作的一些指针会很好。

第二：即使使用相同的css（这种方式需要一些工作），在手机尺寸中，我得到了不同的结果，在Chrome Iphone模拟器中打开网站，或者只是重新调整浏览器窗口的大小？我怎样才能解决这个问题？

在此先感谢，并对我的英语感到抱歉。如果需要的话，问一下，我会发布相关的代码（但是对于我在这里看到的，托管页面将起作用）。

Answer 1

这是一个普遍的问题。不同的浏览器渲染不同的东西，但通常在合理的范围内。在现代浏览器中渲染的主要差异在于缺少正确的前缀代码。如果是这种情况，你可以尝试像https://autoprefixer.github.io/。

如果您指的是您的<H1>元素与移动设备宽度重叠，则为padding：1em;这是一起粉碎文本。相反，您可以尝试使用%来替换em。

Answer 2

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

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

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

感谢您的帮助。