Opera Mini 브라우저 용 CSS 최적화 방법

Question

오페라가 자사의 서버를 통해 우리의 리소스를 터널링하고 사용자에게 압축 된 데이터를 제공한다는 것을 알고 있습니다. Github Screenshot 버튼을 찾고 불규칙한 (안 패딩)된다 -

는 여기에 내가

1. Github에서는 오페라 미니 (안드로이드)를 사용하여 방문한 두 개의 웹 사이트입니다. 추악한 버튼/입력 상자 주변. 사업부의 위치가 적절하지 않습니다. 글꼴은 모두 비슷한 크기입니다. 기본 폴백 글꼴을 사용합니다. 이미지의 크기가 작습니다 (svg/png)는 본사입니다. 이미지는 하이퍼 링크를 겹칩니다.
2. 아마 - Amazon Screenshot 아름다운 테두리. 글꼴 - 패밀리가 다르게 보입니다. 폰트 무게와 글꼴 크기 또한 적절합니다. 사업부는 적절한 방법으로 부유하고 조정됩니다. 이미지 (svg/png)는 HQ입니다. 이미지가 하이퍼 링크와 겹치지 않습니다.

P.S는이 두 사이트는 모바일 크롬에서 잘 봐.

대부분의 사이트는 Opera Mini에서 (1)처럼 보입니다. 다른 쇼핑 사이트 (ebay 등)는 Opera Mini에서도 최적화 된 것처럼 보입니다.

기본적으로 eBay는 아마존의 모바일 브라우저 종류 에서조차 잘 보이도록 사이트 디자인을 관리하는 방법에 대한 CSS의 기법을 알고 싶습니다.

또한 내 미디어 쿼리 질문이 높은 수준뿐만 아니라이기 때문에

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

Answer 1

나는 높은 수준의 조언을 줄 것이다 오페라 미니에서 작동하지 않습니다 (하지만 아름다운 모바일 크롬에서 찾고있다).

caniuse.com으로 이동하여 잘 지원되는 HTML4/CSS2.1 태그/속성을 찾습니다. 그것들은 Opera Mini와 그 ilk를 준수하는 CSS를 작성할 때 주로 사용해야하는 것들입니다.

또 다른 팁은 변경을 할 때 오페라 미니에서 귀하의 웹 사이트를 항상 테스트하여 준수 여부를 확인하는 것입니다. 가장 좋은 방법은 시스템에 Opera Mini Emulator를 설치하고 ngrok을 사용하여 로컬 호스트를 터널하는 것입니다. 기술적 인 세부 사항은 here으로 잘 설명되어 있습니다.

마지막으로 Bruce Lawson에 의해 this 예쁜 결론을 읽는 것이 좋습니다. 그는 미디어 쿼리에 대해서도 언급합니다.

시행 착오가있을 것입니다.