LOOK CODE INCLUDED! No more Javascript/Android screen size redirection issues...

15 replies
Any of you that have read my previous posts will know I am not a big fan of Javascript screensize detect and redirect for mobile devices instead i prefer to use PHP user agent detection...

However i know a lot of people here on WF do use Javascript based screen size detect and redirect... one of the biggest issues with that is many of the new Androids don't get the screen size detected properly and as a result many Android visitors are not getting redirected to your mobile site!

Well despite me not liking that type of redirection i still don't want you missing out on your mobile visitors - so i have a fix for you

Replace http://www.yourdomainhere.com with the domain you want to redirect your mobile visitor too

HTML Code:
<script type="text/javascript">
if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android')!=-1)
(window.location.replace("http://www.yourdomainhere.com"));
</script>
With this code implemented it will redirect visitors with screen sizes smaller than 1024 and also ALL your android visitors.

Place the code before your </head> tag in your html code.

Hope that helps!

But remember...

1) Google mobile bot will not be redirected to your site using this method
2) As mobile screen sizes become bigger this will become less effective.

Cheers,

Jay
#android #issues #javascript #mobile #redirect #redirection #screensize
  • Profile picture of the author danifae
    Originally Posted by Jay Moreno View Post

    1) Google mobile bot will not be redirected to your site using this method
    2) As mobile screen sizes become bigger this will become less effective.

    Cheers,

    Jay
    Thank you for the code!
    Probably a very stupid question but.... can I use this code beside another one, so that also Google bots are redirected to the mobile site?
    {{ DiscussionBoard.errors[5673194].message }}
    • Profile picture of the author Jay Moreno
      Originally Posted by danifae View Post

      Thank you for the code!
      Probably a very stupid question but.... can I use this code beside another one, so that also Google bots are redirected to the mobile site?
      you could but not with javascript, it would need to be php based or done with a .htaccess file - you need to create a 301 redirect for the google mobilbot...

      hope that helps

      cheers

      jay
      Signature
      Sorry, I am too busy helping people to think of a cool signature!
      {{ DiscussionBoard.errors[5674311].message }}
  • Profile picture of the author Nail Yener
    Jay, thanks for the Android addition but that code will also redirect desktop users with a screen width less than 1024px. And pixel is not a physical measure; when you change your screen resolution to 800x600 on a large screen, then the software will read its width as 800px.

    I wouldn't recommend screen size based redirection in any case. Here is a user-agent based JavaScript redirection that I have been using:

    Code:
    http://www.sebastianoarmelibattana.com/projects/js-redirection
    {{ DiscussionBoard.errors[5676103].message }}
    • Profile picture of the author Jay Moreno
      Originally Posted by Nail Yener View Post

      Jay, thanks for the Android addition but that code will also redirect desktop users with a screen width less than 1024px. And pixel is not a physical measure; when you change your screen resolution to 800x600 on a large screen, then the software will read its width as 800px.

      I wouldn't recommend screen size based redirection in any case.

      Nail am with you as i mentioned before i am NOT a fan of screen size redirection never have never will be!

      i personally use our own Wordpress Plugin based on PHP user agent detection or hard coded PHP useragent solution - our Wordpress doesnt just redirect it does a host of other things that you configure that most other solutions simply don't offer.

      Reason i posted this code is a lot of people on the WF do you use this type of simple redirect script... the javascript version is probably one of the most basic ones and simplest to deploy - problem is I get a lot of people asking be about the problems they have with this and it not redirecting certain Android devices...

      i am really not too bothered what screensize you pick thats down to personal preference as we have both mentioned before i wouldn't personal use this! lol ... but for those that want to or have to its very simple to edit 1024 to 799 or whatever you like... thing is screen sizes resolution on mobile devices are constantly increasing... some mobile devices have resolutions over 800 now and stats show its very rare you will get a desktop screen size less than 1024 - resizing your browser window is another matter...

      Using this modified javascript will certainly help anyone who was having issues before with their previous version and android not redirecting it also gives me a reference point to show people who ask me about it... literally the main reason why i took the time to come up with a solution.

      Bottom line for me is use PHP useragent detection where possible - it's much more reliable, it will redirect google's mobile bot if configured correctly - second preference i guess would be .htaccess and then lastly this.

      User agent detection can be used for many things more than just redirect... it's your friend read up on it - it can certainly help for a better mobile user experience!
      Signature
      Sorry, I am too busy helping people to think of a cool signature!
      {{ DiscussionBoard.errors[5679123].message }}
  • Profile picture of the author Terry Jett
    Thanks Jay! Hope all is well for you and the family.

    Do you have recommendation for a script (php or java) that will handle the search engine bots? Want to make sure they find the clients mobile sites.

    Terry
    {{ DiscussionBoard.errors[5679048].message }}
    • Profile picture of the author Jay Moreno
      Originally Posted by Terry Jett View Post

      Thanks Jay! Hope all is well for you and the family.

      Do you have recommendation for a script (php or java) that will handle the search engine bots? Want to make sure they find the clients mobile sites.

      Terry
      Hi Terry, our next update to our own WP plugin will work 100% with the Google Mobile Bot, we have held of updating as we are wrapping up our actual WP Mobile Framework and theme.

      If you have you own PHP script thats doing user agent detection take a look at this page and ensure you script is detecting both the google mobile bots...

      Official Google Webmaster Central Blog: Introducing smartphone Googlebot-Mobile

      REMEMBER though.... unless your site actually validates correctly Google will not consider it mobile and will place your site in the same pool as regular desktop sites.... i have wrote extensively on WF about this particular subject so wont go into too much detail repeating myself here but its worth reading up on to understand the value of validation, and speed. I think both of these will become even more important factors in Mobile Web in the next 18 months.

      FYI - From my understanding Google will ignore ANY javascript based redirection script.
      Signature
      Sorry, I am too busy helping people to think of a cool signature!
      {{ DiscussionBoard.errors[5679229].message }}
      • Profile picture of the author WillR
        Originally Posted by Nail Yener View Post

        Jay, thanks for the Android addition but that code will also redirect desktop users with a screen width less than 1024px. And pixel is not a physical measure; when you change your screen resolution to 800x600 on a large screen, then the software will read its width as 800px.
        Nail,

        It's also worth pointing out that the current statistics show that less than 1% of desktop users have a screen resolution of less than 1024, so I don't see this as a big problem.

        Browser Display Statistics

        Originally Posted by Terry Jett View Post

        Do you have recommendation for a script (php or java) that will handle the search engine bots? Want to make sure they find the clients mobile sites.
        Terry,

        Creating and submitting a Google Mobile sitemap will take care of this for you. This should be standard practice for any sites you create whether mobile or standard.
        {{ DiscussionBoard.errors[5682613].message }}
        • Profile picture of the author Nanaswhimsy
          I still like the idea of instead of a redirect to simply have it read a different CSS file to render the page.
          something like:

          If size is less than 600 load mobile.css,
          if size is 600 >= 1024 load tablet.css,
          else if > 1024 px load site.css

          It gives you more control over the site.

          Suzanne
          {{ DiscussionBoard.errors[5683116].message }}
          • Profile picture of the author WillR
            Originally Posted by Nanaswhimsy View Post

            I still like the idea of instead of a redirect to simply have it read a different CSS file to render the page.
            something like:

            If size is less than 600 load mobile.css,
            if size is 600 >= 1024 load tablet.css,
            else if > 1024 px load site.css

            It gives you more control over the site.

            Suzanne
            Problem with that is you are still serving up the same content to mobile, tablet and PC users which is not always ideal.
            {{ DiscussionBoard.errors[5683989].message }}
            • Profile picture of the author Nanaswhimsy
              Originally Posted by WillR View Post

              Problem with that is you are still serving up the same content to mobile, tablet and PC users which is not always ideal.
              Not if the css is set up to not load certain content based on device.
              {{ DiscussionBoard.errors[5689770].message }}
              • Profile picture of the author M Stacks
                Originally Posted by Nanaswhimsy View Post

                Not if the css is set up to not load certain content based on device.
                Sorry, but there is currently no CSS-only method to avoid loading content that works across all devices. display:none does not stop the browser from downloading the element in most cases. What about images? Squishing the image to fit does not make it smaller in file size. Some browsers will not download images specified as background images in the css, but some will, and some will not only if the parent element is set to display:none. Having all your images as background images is bad practice, anyway.

                The content that gets downloaded needs to really be decided server-side, before anything gets downloaded.

                But you can mix both ways. I currently use css to control display and switch some content (content that would be a very small download). I use a server-side method for images and for other large content, I design creatively. Designing for mobile first makes this a bit easier.

                Look at Adaptive Images or TinySrc for some reasonably simple to implement image solutions.
                {{ DiscussionBoard.errors[5692071].message }}
              • Profile picture of the author WillR
                Originally Posted by Nanaswhimsy View Post

                Not if the css is set up to not load certain content based on device.
                Yes but then the phone is downloading content it doesn't need.
                {{ DiscussionBoard.errors[5693344].message }}
        • Profile picture of the author Terry Jett
          Originally Posted by WillR View Post


          Terry,

          Creating and submitting a Google Mobile sitemap will take care of this for you. This should be standard practice for any sites you create whether mobile or standard.
          Thanks Will.
          {{ DiscussionBoard.errors[5686142].message }}
  • Profile picture of the author HypeText
    Originally Posted by Jay Moreno View Post

    Any of you that have read my previous posts will know I am not a big fan of Javascript screensize detect and redirect for mobile devices instead i prefer to use PHP user agent detection...

    However i know a lot of people here on WF do use Javascript based screen size detect and redirect... one of the biggest issues with that is many of the new Androids don't get the screen size detected properly and as a result many Android visitors are not getting redirected to your mobile site!

    Well despite me not liking that type of redirection i still don't want you missing out on your mobile visitors - so i have a fix for you

    Replace yourdomainhere.com - domain hosting with the domain you want to redirect your mobile visitor too

    HTML Code:
    <script type="text/javascript">
    if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android')!=-1)
    (window.location.replace("http://www.yourdomainhere.com"));
    </script>
    With this code implemented it will redirect visitors with screen sizes smaller than 1024 and also ALL your android visitors.

    Place the code before your </head> tag in your html code.

    Hope that helps!

    But remember...

    1) Google mobile bot will not be redirected to your site using this method
    2) As mobile screen sizes become bigger this will become less effective.

    Cheers,

    Jay
    Just some quick Clarification for those not "Coding Adept"

    The Redirect Script needs to be before the </HEAD> Tag, as he said, but make sure it is AFTER the <HEAD> Tag and BEFORE the </HEAD> Tag or it will not work properly.
    Signature
    (916) 520-HYPE (4973)
    Local & Mobile Marketing Solutions
    $0 Setup & $99/mnth Private Label Reseller Accts
    {{ DiscussionBoard.errors[5689532].message }}
  • Profile picture of the author fabritaly
    [QUOTE=
    <script type="text/javascript">
    if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android ')!=-1)
    (window.location.replace("http://www.yourdomainhere.com"));
    </script>
    [/QUOTE]

    Thank you very much Jay, this script seems to work properly, while the many others that I have tested had some problems
    :- )
    {{ DiscussionBoard.errors[6078681].message }}

Trending Topics