Php, Javascript - Is It Right To Detect Screen-width By Redirecting Header

July 26, 2023 Post a Comment

I am using the following JavaScript to detect the screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of

Solution 1:

Simple answer, no, it is not good from a SEO standpoint. Or any other standpoint. Crawlers such as Googles are designed to completely ignore all hidden elements and thus you will lose big time SEO ranking if your content isnt getting fully crawled, and crawlers crawl each site multiple times masquerading as mobile devices to check if the site is mobile friendly as well. http://www.seonick.net/responsive-design-seo/

Not to mention the trouble of calculating your arbitrary cutoff point of .5mb serves no purpose if the content is merely hidden (since its all getting sent anyway thus saving no bandwidth).

You need to do this in pure CSS using media queries, it is the most compatible way and allows for a fluid design (changes on the go as the window resizes.

<link  media="(max-width: 700px)" href="mobile.css">
<link  media="(min-width: 700px)" href="full.css">

That will use one css file if the window is smaller than 700px and the other if it is over.

Another of my more favorite methods is to use the http://mobiledetect.net/ class. Its small and fast, more accurate and better flexibility. Load that class then just add classes to your body element depending on the visitors browser

<bodyclass="<?PHPif ($detect->isMobile() && !$detect->isTablet()) echo" .phone";?>">

Then style by targeting classes inside body.phone. This method also ensures you know if the browser is mobile BEFORE the DOM starts to process, meaning you can serve compressed versions of images through some simple logic rather than having CSS swap them out or just resize them or omit entire parts of the markup from being sent to the user at all ensure bandwidth is only used for parts of the DOM relevant to the users device.

<body>
This is normal content and will be visible to all devices
<?PHPif (!$detect->isMobile()) { ?>
This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM
<?PHP } ?></body>

Solution 2:

To set a cookie in javascript

functionCookies(){};
Cookies.prototype.save=function(name,value,days){
    if( days ) {
        var date = newDate();
        date.setTime( date.getTime()+( days*24*60*60*1000 ) );
        var expires = "; expires="+date.toGMTString();
        var dom = "; domain="+document.domain;
    } else { expires = ""; }
    var path = "; path=/";
    var tmp=[];
    if( typeof( value )=='object' ) {
        for( p in value ) tmp.push( p+'='+value[ p ] );
        value=tmp.join(';');    
    }
    document.cookie = name+"="+value+expires+path;
};
Cookies.prototype.read=function(name){
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for( var i=0; i < ca.length;i++ ) {
            var c = ca[i];
            while( c.charAt(0)==' ') c = c.substring(1,c.length);
            if( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length );
        }
        returnnull;
};
Cookies.prototype.erase=function(name){
    this.save( name, "", -1 );
};



var cn='jsdim';
var ckie=newCookies;
ckie.save( cn, JSON.stringify({ width:screen.availWidth, height:screen.availHeight, colour:screen.colorDepth, depth:screen.pixelDepth }), 1 );

In PHP

<?phpif( isset( $_COOKIE['jsdim'] ) ){
        $json=json_decode( $_COOKIE['jsdim'] );
        if( !defined('SCREEN_WIDTH') ) define( 'SCREEN_WIDTH', $json->width );
        if( !defined('SCREEN_HEIGHT') ) define( 'SCREEN_HEIGHT', $json->height );
        if( !defined('SCREEN_COLOUR_DEPTH') ) define( 'SCREEN_COLOUR_DEPTH', $json->colour );
        if( !defined('SCREEN_PIXEL_DEPTH') ) define( 'SCREEN_PIXEL_DEPTH', $json->depth );
    }
?>

Solution 3:

I do not think, that screen size/resolution is really what you want to adjust your view templates for mobile devices. Actually you want to know what plattform/device someone is using, think about Nexus 7, which has 1920 × 1200 or Sony Xperia Z5 with 2160 x 3840px.

I would look at user-agent and HTTP headers for the server side code, there are already good libraries for that: e.g. mobiledetect. For the client side the best practice is to use CSS3 Media Queries: Media Queries for Standard Devices

Solution 4:

You can retire the $_GET of the URL by the htaccess, I'm using RewriteRule.

Options +FollowSymLinks
RewriteRule ^folder/file.php$ folder/file.php?g=2
#if you want to remove php file extension, don't keep the .php before the $

To remove all php files extension: php.net.

Edit: this is for who doesn't use Wordpress

Solution 5:

You can use this plugin: https://wordpress.org/plugins/mobble/ It adds an is_mobile()-feature.

In your theme you can now use is_mobile() instead of $_GET['width'] > ... This way you don't need a ?width= in your $_GET

JavaScript Site