浏览器和移动设备的不同输出 - 相同的CSS

时间:2016-05-13 21:00:49

标签: html css

好的,第一次海报,网站的长期用户(搜索线索时)。

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

unique token filter

但我有两个愚蠢的(我相信)问题。

第一:不能让一个css引用在移动和浏览器窗口上工作(在同一个外部css的html上有两个条目)。准备好适当的媒体查询使用,但根本无法完成。只有一个媒体查询的两个指针对两者都有效。

第二:即使使用相同的CSS(顺便说一下还需要一些工作),在移动设备尺寸上,我在Chrome Iphone模拟器中打开网站会有不同的结果,或只是重新调整浏览器窗口?我怎样才能解决这个问题?

提前致谢,对不起我的英语。如果需要,只需询问,我将发布相关代码(但是我在这里看到的,托管页面可以工作)。

2 个答案:

答案 0 :(得分:0)

这是一个普遍的问题。不同的浏览器以不同的方式呈现事物,但通常在合理范在现代浏览器中渲染的主要差异通常是由于缺少正确的前缀代码。如果是这种情况,您可以尝试https://autoprefixer.github.io/之类的内容。

如果您指的是移动设备宽度上重叠的<H1>元素,那就是填充:1em;这是一起粉碎文本。相反,您可以尝试使用%替换em

答案 1 :(得分:0)

发现了这个问题。正如我发现的那样,Iphone浏览器进行了一些奇怪的调整。所以我只想添加

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

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

感谢您的帮助。