android - Opera-Mini浏览器CSS优化实践

Question

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

这是我用Opera-Mini(Android)访问过的两个网站

1. Github - Github Screenshot 按钮看起来不规则(未填充)。按钮/输入框周围的边框很丑。 Div 未正确定位。字体都是相似的大小。使用默认后备字体。图像是小尺寸的(svg/png)是总部。图片与超链接重叠。
2. 亚马逊 - Amazon Screenshot 美丽的边框。 Font-Family 看起来不同。字体粗细和字体大小也是正确的(并且不同)。 Div 以适当的方式 float 和对齐。图片 (svg/png) 是 HQ。图片不与超链接重叠。

P.S 这两个网站在 Mobile Chrome 中看起来都不错。

大多数站点在 Opera-Mini 中看起来像 (1)。 即使在 Opera-Mini 中，也很少有其他购物网站(ebay 等)看起来经过适当优化。

所以基本上我想知道 CSS 的技巧实践，了解 Amazon、eBay 如何设法设计他们的网站，即使在那些移动浏览器中看起来也很好。

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

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

Answer 1

我会给出高层次的建议，因为你的问题也是高层次的。

转到 caniuse.com 并查找支持良好的 HTML4/CSS2.1 标签/属性。在为 Opera Mini 及其同类产品编写符合 CSS 规范的时候，这些大多是您需要坚持的。

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

最后，我建议您阅读 this Bruce Lawson 的非常有说服力的文章.他还谈到了媒体查询。

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