Scale mobile website with CSS Viewport

0
votes

I want to change the look of a website on the mobile Opera browser. I use a user style to change some CSS values, this worked well for now, but the page doesn't scale to the devices full width (either orientation). Since I will only use this for Opera anyways, I can use the Opera-CSS property "@-o-viewport"

Here's a tutorial on how to use it: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

The page has a fixed width, I still want the device to zoom into the website, so it's as big as possible while still showing the full width of the page.

When I'm trying this, it's not working. The page is shown with the different user style, but the css viewport property won't work the way I intended it to be, the page is shown at a zoom of about 0.4

2
cssoperascaleviewport
Can you share example code? It's quite hard to understand what exactly you want to do from your description alone. – andreasbovens
I found the problem myself now. While I tried to rebuild it on my own server as example code, I noticed that the problem is, Opera's user css loads too late, which is why the viewport rule won't work. When I wrote the viewport at the end of the body tag for example, it worked like I intended it to do. – user828591
Interesting. Can you file a bug on bugs.opera.com/wizard with steps to reproduce? I will follow up. – andreasbovens
Sorry for the delay (holidays n stuff), I've made a bug-report now. – user828591

2 Answers

1
votes

you could do it with the meta tag viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">
0
votes

@-o-viewport {width: $px}

where $ = the width of the page you're trying to optimize in pixels (e.g. 800)