Printable View
Hi,
Does anyone know what code to use (Nokia Web Tools) to detect and switch screen resolutions from a 240x320 device to 320x240 device?
I've tried using js and css, but it seems that the css stylesheet gets optimized and some styles that I put in get stripped out.
Hey,
S40 devices don't support display orientation switching, so you don't need to worry about runtime resolution changes.
You can set the CSS file used by the app by detecting the screen width/height at app startup and by injecting a CSS file to the html head:
E.g. this works:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css.test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
if (screen.width > 240) {
document.write('<link rel="stylesheet" href="landscape.css" type="text/css" />');
}
else {
document.write('<link rel="stylesheet" href="portrait.css" type="text/css" />');
}
</script>
</head>
<body >
hi there!
</body>
</html>
[/html]
CSS files or new inline styles can't be injected or created during app runtime, but you can still dynamically apply pre-declared styles during runtime using e.g. mwl.addClass / removeClass / switchClass, etc. Documented here: [url]http://www.developer.nokia.com/dp?uri=http%3A%2F%2Fsw.nokia.com%2Fid%2F85b2f9e2-6030-4ed5-a8d4-a82a627919d5%2FSeries_40_Web_Apps_Developers_Guide_and_API_Reference[/url]
petro
Hi Petro,
Can you provice a complete examples i tried above code but seems not working for me .. loaded on device and simulator both. To debug place an alert, for simulator, but shoowing screen width of my laptop
Thanks
i think [url]http://www.developer.nokia.com/Community/Wiki/Coding_Series_40_web_apps_for_screen_orientation[/url] will work