Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Disable auto zoom effect on orientation IPAD Safari

Posted in Javascript, JQuery

You might face automatic zoom-in effect in IPAD if you change it’s orientation. For that you can use HTML 5 “deviceorientation” event. In this event you can check whether device is in landscape or portrait mode. Accordingly, set meta tag based on orientation of the device. See below example

Detect device orientation


     $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
			alert("Device is in portrait mode")
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
			alert("Device is in landscape mode")
		}
	});


Disable auto zoom in IPAD

    $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
                   $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=0.74, user-scalable=no");
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
	           $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
		}
   });

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Check device orientation using JQuery

Posted in Javascript, JQuery

If you are developing a mobile website you will definitely check it in both landscape and portrait mode. For that you can use HTML 5 “deviceorientation” event. Using this you can check whether your device is in portrait and landscape mode.

Example:


     $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
			alert("Device is in portrait mode")
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
			alert("Device is in landscape mode")
		}
	});


Here, we have used window.matchMedia() function. We can write media queries in javascript using window.matchMedia(). It returns a MediaQueryList object containing some functions and properties. “matches” property is a boolean parameter it is used to match media queries.

You might face automatic zoom-in effect in IPAD if you change it’s orientation. For that you can set meta tag based on orientation of the device. See below example

    $(window).on("deviceorientation", function( event ) {
		if (window.matchMedia("(orientation: portrait)").matches) {
                   $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=0.74, user-scalable=no");
		}
		if (window.matchMedia("(orientation: landscape)").matches) {
	           $("meta[property=metainf]").attr("content","width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
		}
   });

Initial-scale should be “1” to avoid automatic zoom-in and zoom-out effect in ipad or any other devices. So only play with maximum-scale and minimum-scale accordingly.