26
edits
Changes
Jump to navigation
Jump to search
Line 933:
Line 933: − + − + Line 946:
Line 946: − + − + − + − + Line 961:
Line 961: − window.setInterval(function () { + − + − +
Corrected screen size info and document example
== Screen Resolution ==
== Screen Resolution ==
The up screen resolution is 400×240. However, the viewable area in the browser is only <b>400×220</b>.
The up screen resolution is 400×240. However, the viewable area in the browser is only <b>400×215</b>.
The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
You can have a page span both screens. However, the browser will behave as if the bottom screen is the only active screen and the top screen is scrolled off. This is important when computing CSS coordinates. Items positioned from "bottom" will be positioned based on 220px and not the full 432px of both screens.
You can have a page span both screens. However, the browser will behave as if the bottom screen is the only active screen and the top screen is scrolled off. This is important when computing CSS coordinates. Items positioned from "bottom" will be positioned based on 215px and not the full 427px of both screens.
== Using Both Screens ==
== Using Both Screens ==
<html>
<html>
<head>
<head>
<meta name="viewport" content="width=400">
<meta name="viewport" content="width=400, initial-scale=1">
<style>
<style>
body{margin:0px;}
body { margin: 0px; }
#topscreen{width:400px;height:220px;overflow:hidden;}
#topscreen { width: 400px; height: 215px; }
#bottomscreen{width:320px;height:212px;overflow:hidden;margin:0 auto;}
#bottomscreen { width: 320px; height: 212px; margin: 0 40px 28px; }
</style>
</style>
</head>
</head>
This scheme allows the page to be easily manipulated through JavaScript. In order to have the window snap to the correct position, use the following JavaScript code:
This scheme allows the page to be easily manipulated through JavaScript. In order to have the window snap to the correct position, use the following JavaScript code:
document.addEventListener("scroll", function () {
window.scrollTo(40, 220);
window.scrollTo(40, 215);
}, 50);
}, 50);
This automatically resets the position if the user accidentally scrolls the page.
This automatically resets the position if the user accidentally scrolls the page. Zooming should probably also be disabled by adding <code>user-scalable=no</code> to the <meta> viewport element.
==Example Sites==
==Example Sites==