My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
Opera Mobile 10 Viewport Tag Problems
The final build of Opera Mobile 10 appears to have issues with the viewport tag. I believe it was working on beta 1 but I don't have that build around anymore to test with.Here is some test HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="mobileoptimized" content="0">
</head>
<body>
<img src="http://static.myopera.com/community/graphics/main/logo.png">
</body>
</html>
In Opera Mobile 10, the image will appear pixelated because it is zoomed to 200%. Now look at the same page in IE on the same device and renders correctly. Adding a maximum-scale and initial-scale seem to have no affect. I've tested this with the final build of OperaMobi 10 on:
Q9H (Win 6.1)
WinMo 6.1.4 emulator (VGA)
I have the same problem in both 9.5 and 10 (even if they behave a bit different). Testing my code in the opera mobil emulator on (both mac and windows) gives me the expected result. But on Opera 9.5 or 10 on a Windows mobile (HTC Touch HD2) it is zoomed in as iPhoneman said.
This reference page mentioned in this article also works fine in the emulator, but is also zoomed in an incorrect way in both Opera 9.5 and 10.
My ugly work around, that worked for Opera 9.5 became:
Anyone with better luck?
ps. I'm using the HTML5 doctype
This reference page mentioned in this article also works fine in the emulator, but is also zoomed in an incorrect way in both Opera 9.5 and 10.
My ugly work around, that worked for Opera 9.5 became:
<meta name="viewport" content="width=320, user-scalable=no, initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6" />
Anyone with better luck?
ps. I'm using the HTML5 doctype
I got around this problem by using a different docType.
Use the following page header
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Then remove all your viewport tags.
I got this code from the mobile google.com web page.
Use the following page header
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Then remove all your viewport tags.
I got this code from the mobile google.com web page.
Originally posted by cuongluu8:
I got around this problem by using a different docType.
Opera Mobile assumes that any document with a mobile specific doctype, such as XHTML Mobile Profile or XHTML Basic are designed and optimised for mobile, while documents with a regular doctype are not optimised for mobile generally. Thus if there is a desktop doctype the overview mode is enabled, which you can control with the viewport meta element. If there is a mobile doctype the overview mode is disabled and a regular 1:1 viewport is used.
There were some bugs in the viewport meta element support in Opera Mobile. They should be fixed in the latest version.
<q>Knowledge speaks, but wisdom listens.</q> - Jimi Hendrix
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA
David Storey, Chief Web Opener, Product Manager Opera Dragonfly, Opera Software ASA