My team at work is trying to develop a website for both desktop and mobile and we want certain function to only be available for mobile users .We have been brainstorming of different methods to detect mobile and desktop users and have brainstorm the following ideas
1) Check for screensize , if its less than certain size , we can safely assume
it is desktop
2) Check user browser user agent string
3) Capability testing
Are there any other methods to detect between Desktop and Mobile , if its possible please list the pros and cons of the method also .
Thanks
Intro
There are few available solutions but I will only name open-source ones, at least solutions mostly used with a jQuery/jQuery Mobile. Also be warned, this topic has the potential to start a war. On one side we have a proponents of server side detection with their community maintained databases and on the other side we have client side advocates with their browser sniffing.
Solution 1
WURFL
Solution 2
Modernizr - Server
Solution 3
Modernizer - Client
Solution 4
JavaScript based browser sniffing
<script type="text/javascript">
var agent = navigator.userAgent;
var isWebkit = (agent.indexOf("AppleWebKit") > 0);
var isIPad = (agent.indexOf("iPad") > 0);
var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
var isAndroid = (agent.indexOf("Android") > 0);
var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
var isWebOS = (agent.indexOf("webOS") > 0);
var isWindowsMobile = (agent.indexOf("IEMobile") > 0);
var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
var isUnknownMobile = (isWebkit && isSmallScreen);
var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
var isTablet = (isIPad || (isMobile && !isSmallScreen));
if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect();
</script>
Solution 5
CSS Media Queries
This used to be a great and easy solution but not any more, mainly because mobile devices reached and surpass desktop computer screen sizes.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Solution 6
Detect mobile browser
Never used this one personally
More info
More of this is described in my other answer, find it here.
1) Use CSS (thanks to Titanium for this)
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
2) Use JavaScript
document.write("User-agent header sent: " + navigator.userAgent);
3) What do you mean by Capability testing?
Related
I wrote media queries for iPhone 4/4S, iPhone 5/5S, iPhone 6 and iPhone 6Plus.
Here is the code:
/*For iPhone 4/4S*/
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait){ /*my styles here */ }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape){ /*my styles here */ }
/*For iPhone 6*/
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /*my styles here */ }
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /*my styles here */ }
/*For iPhone 6plus*/
#media only screen and (min-device-width : 414px) and (max-device-width :
736px) and (orientation : portrait) { /*my styles here */ }
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /*my styles here */ }
For portrait mode, each device's portrait css gets applied successfully. But for landscape mode of all devices, only landscape media query of iPhone 6Plus is getting applied.
How can I fix it?
If you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:
#media (min-width: 700px), handheld and (orientation: landscape) { ... }
Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as #media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.
comma-separated lists
Comma-separated lists behave like the logical operator or when used in
media queries. When using a comma-separated list of media queries, if
any of the media queries returns true, the styles or style sheets get
applied. Each media query in a comma-separated list is treated as an
individual query, and any operator applied to one media query does not
affect the others. This means the comma-separated media queries can
target different media features, types, and states.
reference
I have been testing media queries on Browserstack, I need to make specific changes to the page layout for iPads. I can get media queries to work on the desktop version of the site but I can not get media queries to work for all iPads. The following media queries work but only on the latest iPad version which Browserstack refers to as iPad 3rd(7). i have been referencing this site for media queries.
http://code-tricks.com/css-media-queries-for-common-devices/
This first one is the only one I have had success with, but only for iPad3, nothing else works for other iPad versions.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
h1.iPadThis {color:black;}
}
This should work for all ipad versions but only works for iPad 3
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
h1.iPadThis {color:orange;}
}
I have tried the following for iPad 1 and 2 but it does not work on Browserstack.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
h1.iPadThis {color:orange;}
}
And I have this in the head
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
Can anybody tell me what I am doing wrong here?
Thanks.
you also try this :
#media (min-width:600px) and (max-width:767px) {
h1.iPadThis {color:orange;}
}
or
#media (max-width:767px) {
h1.iPadThis {color:orange;}
}
I need query for mobile iPhone 5 and galaxy S4 landscape view...
Her is my code but something is not ok here.
#media
(max-width : 800px){
// style
#media
(max-width : 360px){
//style
On resolution 360 evrything is ok, What i need to enter for landscape view.
Here is EXAMPLE
From this site:
iPhone 5 in landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)
{
/* STYLES GO HERE */
}
Samsung Galaxy S4 Landscape (from here)
#media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
and (device-width: 1920px)
and (orientation: landscape) {
/* Your styles here */
}
Use device-aspect-ratio for iPhone 5 - it does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone 5 only:
#media screen and (device-aspect-ratio: 40/71) and (orientation:portrait) {
/*style here*/
}
Galaxy S4 only:
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
/*style here*/
}
I have the following:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.textular {
font-size: 10px;
}
}
I got this from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and I only need that above code. It doesn't seem to work. Am I doing something wrong?
I wouldn't use (orientation: landscape) - you're much better off just defining more detailed media queries as this will take into account whether or not the tablet/iPad is in Portrait.
These are the media queries I use:
LANDSCAPE TABLET (min-device-width : 901px) and (max-device-width : 1024px)
PORTRAIT TABLET (min-device-width : 721px) and (max-device-width : 900px)
MODERN SMARTPHONES (min-device-width : 481px) and (max-device-width : 720px)
1ST GEN SMARTPHONES (min-device-width : 361px) and (max-device-width : 480px)
LOW-RES SMARTPHONES (max-device-width : 360px)
You also have to take into consideration whether or not the device is retina or non-retina. To show you an example, you would include (-webkit-min-device-pixel-ratio:2) in your media query.
One thing you should check to see if it's the problem - in your original class 'textular', do you define font-size? I'm sure the problem is something very trivial.
So i have added some javascript to add a class to my body -
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(ipad)/);
if (agentID) {
$("body").attr("id", "ipad");
return;
}
I have three media queries one for standard mobile and one for retina, some of the mobile styling seems to be showing on chrome on iPad the media query is below
#media only screen and (max-device-width: 480px) {
}
#media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
}
And my third media query
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
But all the styles I put in either media query have no effect in Chrome on an ipad, it works perfectly on Safari on an iPad. Even the javascript which adding the class doesn't seem to be working, i've added
#ipad body {background-color:red!important;}
to the main css outside the media queries and nothing.
It's just chrome that isn't behaving. I have cleared the cache and browser data but still nothing.
Any ideas?