Opera-Mini浏览器优化Css的实践

Question

我知道Opera通过其服务器隧道传输资源，并为用户提供压缩数据。

以下是我使用Opera-Mini（Android）访问过的两个网站

1. Github - Github Screenshot   按钮看起来不规则（没有填充）。按钮/输入框周围的丑陋边框。分区没有正确定位。字体都是相同的大小。使用默认后备字体。图像是小尺寸的（svg / png）是HQ。图像重叠超链接。
2. 亚马逊 - Amazon Screenshot 美丽的边界。字体系列看起来不同。字体粗细和字体大小也适当（和不同）。 Div以适当的方式浮动和对齐。图像（svg / png）是HQ.Images不重叠超链接。

P.S 这两个网站在移动浏览器中都很不错。

大多数网站在Opera-Mini中看起来像（1）。 而且很少有其他购物网站（ebay等）在Opera-Mini中看起来也很合适。

所以基本上我想知道关于亚马逊，eBay如何设计他们的网站看起来如此优秀的css技巧 - 即使在那种移动浏览器中也是如此。

此外，我的媒体查询在Opera-Mini中不起作用（但在移动Chrome中看起来很漂亮）

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

Answer 1

我会提供高级别的建议，因为你的问题也是高级别的。

转到caniuse.com并查找支持良好的HTML4 / CSS2.1标记/属性。这些主要是您在为Opera Mini及其同类产品编写CSS兼容时需要坚持的。

另一个提示是在进行任何更改时始终在Opera Mini中测试您的网站，以确保合规性。最好的方法是在您的系统上安装Opera Mini Emulator，并使用ngrok来隧道您的localhost。技术细节很好地记录在案here。

最后，我建议您阅读this Bruce Lawson这篇非常有说服力的文章。他也涉及媒体查询。

这将需要一些试验和错误，但如果你坚持下去，你就会到达那里。