爲Opera-Mini瀏覽器優化Css的做法

Question

我知道opera通過其服務器隧道化我們的資源併爲用戶提供壓縮數據。

這裏是我訪問使用Opera迷你（安卓）

1. Github上兩個網站 - Github Screenshot 按鈕尋找不規則（不填充）。按鈕/輸入框周圍的邊框很難看。 Div沒有正確定位。字體都是相似的大小。使用默認的回退字體。圖像是小型的（svg/png）是HQ。圖像重疊超鏈接。
2. 亞馬遜 - Amazon Screenshot 美麗的邊界。字體家庭看起來不同。字體重量和字體大小也是適當的（和不同的）。 Divs浮動並以適當的方式對齊。圖像（svg/png）是HQ.Images不重疊超鏈接。

P.S兩個站點中的移動版Chrome好看。

大多數網站看起來像（1）在Opera Mini中。 很少有其他購物網站（易趣等）看起來適當優化，即使在Opera Mini中。

所以基本上我想知道css的技巧 - 如何亞馬遜，eBay管理設計他們的網站看起來如此好，即使在這些類型的移動瀏覽器。

而且我的媒體查詢不是在Opera迷你工作（但在移動瀏覽器都看上去很美）

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

Answer 1

我給高層次的建議，因爲你的問題是高層次的爲好。

轉到caniuse.com並查找支持良好的HTML4/CSS2.1標籤/屬性。這些大多是您在爲Opera Mini及其同流暢編寫CSS時必須遵守的。

另一個提示是，當您進行任何更改時，總要在Opera Mini中測試您的網站，以確保合規。最好的方法是在您的系統上安裝Opera Mini Emulator，並使用ngrok來隧道您的本地主機。技術細節很好地記錄在here。

最後，我建議您閱讀thisBruce Lawson的相當確鑿的文章。他也涉及媒體查詢。

這將需要一些試驗和錯誤，但如果你堅持不懈，你會到達那裏。