A template of a html page compatible with mobile device layout is attached at the end of this post.
In the header: <meta name="viewport" content="width=device-width"> means if the agent is a mobile device, then set the page width to the device's width.
In the resizePage() function, if the navigator useragent is detected as a mobile device, then set the image's width and the div's width. Function effectiveDeviceWidth() [1] will return the device screen width for the current orientation (horizontal or vertical). The code in [1] was like this but somehow it does not work with my Android:
function effectiveDeviceWidth() {
var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceWidth = deviceWidth / window.devicePixelRatio;
}
return deviceWidth;
}
Note you can see relevant parameters with this javascript:
document.write("width: " + window.screen.width + ", height:" + window.screen.height + ", ratio:" + window.devicePixelRatio + ", orientation:" + window.orientation);
For example, for iPhone:
Vertical: width: 320, height: 480, ratio: 2, orientation: 0
Horizontal: width: 320, height: 480, ratio: 2, orientation:90 or -90
For Android:
Vertical: width: 480, height: 800, ratio: 1.5, orientation: 0
Horizontal: width: 800, height: 480, ratio: 1.5, orientation:90 or -90
Note in general it is hard to get the device size in a way compatible with all the brands. I am using iPhone 7.1 and Android 4.1.2.
The code after this [2] are useful to mobile devices that do not automatically update layout when orientation is changed. This is not an issue for iPhone, but is one for Android.
== HTML Page Template Compatible With Mobile Devices ==
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Test Site</title>
</head>
<body style="margin: 0px 0px 0px 0px;" onload="resizePage();">
<center>
<img id="img1" src="https://www.google.com/images/srpr/logo11w.png">
<div id="div1">
<h2>About</h2>
<p>This is a site compatible to mobile device layout.</p>
</div>
</center>
<script type="text/javascript">
//
// Reisze page elements according to device width.
// Applies for mobile devices only.
//
function resizePage() {
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1 ||
uagent.search("ipod") > -1 ||
uagent.search("ipad") > -1 ||
uagent.search("appletv") > -1 ||
uagent.search("android") > -1 ||
uagent.search("blackberry") > -1 ||
uagent.search("webos") > -1
) {
var w = effectiveDeviceWidth();
document.getElementById("img1").style.width = w + "px";
document.getElementById("div1").style.width = (w - 20) + "px";
}
}
function effectiveDeviceWidth() {
// document.write("width: " + window.screen.width +
", height:" + window.screen.height + ", ratio:" +
// window.devicePixelRatio + ", orientation:" + window.orientation);
var deviceWidth = window.screen.width;
if (navigator.userAgent.toLowerCase().indexOf('android') > -1 && window.devicePixelRatio) {
deviceWidth = deviceWidth / window.devicePixelRatio;
}
return deviceWidth;
}
//
// Resize page if orientation is changed. useful for Android.
//
var previousOrientation = window.orientation;
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
previousOrientation = window.orientation;
resizePage();
}
};
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
</script>
</body>
</html>
References:
[1] Detect effective horizontal pixel width on a mobile device with Javascript
[2] Detect rotation of Android phone in the browser with javascript
Thursday, August 7, 2014
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment