CSS hack for Opera Mini only

css, opera-mini

Solution

Eventually, the best non-js solution was:

:-o-prefocus, .block1, .block2 {font-size: 14px;}
@-o-viewport {zoom: 0.75;}

Problem

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;} ```

Original source