CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
Gunr Jesra
Gunr Jesra

Reputation: 110

How to redirect users to the right website template by pixel and js detection?

i created a nice code in jquery, it checks for pixels on screen and will soon redirect to the appropiate version

but i got to the point where i needed to support the disabled javascript and i got stuck at "how am i going to check if javascript is disabled in javascript?" silly right

so what am i supposed to do to run checks i heard of the viewport but i dont know if it can actually redirect to the index

var w = $(this).width();
        var h = $(this).height();
        if (w > 310 && w > 190 && h > 310)
        {
                alert('Tiny basic html Version <310x<310');

        }
        else if (w > 310 && w <= 800 && h > 480 && h < 1800)
        {// only if its not a desktop like windows or mac or linux or any other mature browser
        //only mobile detection here and other stuff
                alert('SmartPhone Version <800x>480');

        }
        if (w > 800 && w < 3500 && h < 3000)
        {//if its mobile os redirect to the smarphone version no matter how big that tablet is unless option

            alert('Large Desktop with OS detection');

        }

Upvotes: 0

Views: 294

Answers (1)

Connor
Connor

Reputation: 645

You can do a redirect to a mobile page

<script type="text/javascript">
<!--
if (screen.width <= 700) {
document.location = "/mobile";
}
//-->
</script>

But then, if JavaScript is disabled you can use css to re size and reshape the site, depending on the screen size

@media screen and (max-width:800px) {

// then put your mobile css in here

}

Same thing, but specific to a screen ratio (iphone 5)

@media screen and (device-aspect-ratio: 40/71)
{

}

more info here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

For @media screen it literally changes the page if you re size it there on the spot, you can remove columns or move them underneath others for every different size

or if you really want to, use php for specific devices

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
// ect ect....

if ($iphone || $android || $palmpre || $ipod || $berry == true) 
{ 
header('Location: http://mobile.site.com/');
//OR
echo "<script>window.location='http://mobile.site.com'</script>";
}
?>

Upvotes: 2

Related Questions