Make a Jquery script to run only on mobile phones

Asked

Viewed 356 times

1

I can’t post the code now, so I’ll be as clear as I can.

I’m making a website on that standard single page, where every session of the site has the exact screen size. This is done via Jquery(that basic script of catching the screen size).

The site was not designed to support mobile phones, but the customer only asked for a screen size adjustment when the site is accessed via mobile phone (in portrait format). Since I can’t give you any more explanations I’ll ask you the question

How to make a Jquery script that runs only on mobile phones? Or how to change what already exists so that it doesn’t support mobile (in this case I would fix Css with media query).

jquery html
  • 1

    Dude, another option is you use media queries. Take the most popular resolutions from phones and display the field only when the rule obeys one of these media querys. More information on the links: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries and http://tableless.com.br/introducao-sobre-media-queries/

  • Your problem is very wide, if the problem is with the layout then it is not quite a problem to solve with jquery (unless it is a gambiarra). The layout has to be built to be responsive, in most cases it is impossible to take a normal layout and move to responsive, it is not just a matter of mediaqueries, have to solve in html as well.

2 answers

3

This method checks if the device being accessed is PC or MOBILE, but would recommend using viewport and mobile first (technique for creating responsive websites), facilitate much more your life and you would not need to JS to organize the page.

function isMobile(){
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a);
}

How to use:

if (isMobile()) {
     alert("Código executa somente em mobiles");
}

  • It is not a responsive site, it was asked only a fit. Know those customers who do not know what they want?

  • 1

    yours, I’ve had many... (-_-)

  • Looks like it didn’t work

  • @Brumazzid.B. I removed the return true and false because they were a little redundant and I added an example =) - I hope you understand editing as a help to you.

  • yes yes, I understood what was done, vlw

2


Below is an example and I hope it will be useful for your doubt:

function isMobile() {
    var userAgent = navigator.userAgent.toLowerCase();
    return (userAgent.search(/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i) != -1;
}

And then to perform a response-based action:

if (isMobile()) {
   // aqui, o script que você deseja que seja executado caso o acesso esteja sendo feito via Mobile/Celular
   alert("Executado via Celular!");
}
  • 1

    I removed the return true because he was a little redundant =) - I hope you understand editing as a help to you

  • The code worked when detecting the mobile user, but I could not create alternatives to solve a secondary problem that is screen portrait canvas landscape. Despite this with the code I managed to remove the support for mobile and so I made the necessary adjustments via media query, so thanks, it was exactly what I was looking for.

  • Guilherme Nascimento, thank you for the editions!

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.