优化Opera浏览器Css的实践

Question

我知道opera通过它的服务器引导我们的资源，并给用户提供压缩的数据。

以下是我使用Opera-Mini(Android)访问的两个网站

1. Github - Github截图按钮看起来不规则(不是填充)。按钮/输入框周围丑陋的边框。Div没有正确定位。字体都是简单的大小。使用默认的回退字体。图像大小较小(svg/png)是总部.图像重叠超链接。
2. 亚马逊- 亚马逊截图美丽的边界。字体-家庭看起来不一样。字体重量和字体大小也是适当的(而且不同).Div以适当的方式浮动和对齐。图像(svg/png)是HQ.Images，而不是重叠的超链接。

P.S这两个网站在移动Chrome上看起来都很不错。

大部分的网站看起来像(1)在歌剧院-迷你。很少有其他购物网站(ebay等)看起来很适合优化，即使是在Opera-Mini。

所以基本上我想知道css的一些技巧--在亚马逊，eBay如何设计他们的站点，即使在那些移动浏览器中也是如此。

另外，我的媒体查询在Opera-Mini中不起作用(但是在Mobile中看起来很漂亮)

@media(max-width:480px){
    #somerule{
               //not working
    }
 }  

Answer 1

既然你的问题也是高层次的，我会给你高级别的建议。

转到caniuse.com并查找支持良好的HTML4 4/CSS2.1标记/属性。在为Opera Mini和它的同类编写符合CSS的程序时，主要需要坚持这些。

另一个技巧是，当你做任何改变时，总是在Opera Mini中测试你的网站，以确保你的网站符合要求。最好的方法是在您的系统上安装Opera模拟器，并使用ngrok来隧道您的本地主机。技术细节有很好的文档说明这里。

最后，我建议您阅读这由布鲁斯·劳森撰写的相当有说服力的文章。他还涉及到媒体问题。

这将需要一些尝试和错误，但你会达到如果你坚持。