Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS hack for Opera Mini only

Tags:

css

opera-mini

Opera Mini doesn't support line-height and font-size correctly and I have 2 blocks of text (10px/1 Arial) — one at the top and one at the bottom of the page, both should be always visible (no scrolling or moving them allowed) but as they take much more space in Opera Mini I've got to downsize and remove some other blocks so there wouldn't be any scrolling (it's critical on mobile devices with small screens like 320x480px).

I know about JS solution that work perfectly, but I'm not allowed to use any scripts on that page. I can't use any not-standard font either. I'm only allowed to used the internal style sheet.

I couldn't find anything better than :-o-prefocus and I use it along with @media's so it would affect only mobile devices with small screens where the text takes much space, but this way it still affects all Operas on those devices so other blocks are unnecessary small or being removed there.

So basically, the question is — is there any pure CSS solution targeting Opera Mini only?

Update:

Eventually, the best non-js solution for the original problem I ended up with was:

:-o-prefocus, .block1, .block2 {font-size: 14px;}
@-o-viewport {zoom: 0.75;}
like image 895
tinor Avatar asked Feb 13 '14 01:02

tinor


1 Answers

Eventually, the best non-js solution was:

:-o-prefocus, .block1, .block2 {font-size: 14px;}
@-o-viewport {zoom: 0.75;}
like image 105
User Avatar answered Nov 10 '22 05:11

User