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?
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;}
}
My test site is here: one-story-beta.herokuapp.com
I am having an issue with the viewport in portrait mode, where the content is not scaling down correctly. It is fine in landscape view. This was my original viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
And then I tried:
<meta name="viewport" content="initial-scale = 1,user-scalable=no,maximum-scale=1.0">
But neither seemed to fix the problem. I've also tried to set a media query for portrait mode, where I set the body to be 768px. Something like this:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
max-width: 768px;
}
header {
max-width: 768px;
}
}
But that didnt work either.
Am i missing something obvious here?
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?
i'm currently having troubly with a site that i'm converting to a adaptive-website. For some reason i can only get one of the orientations to work on the iPad. If i comment out the landscape styling the portrait styling works on the ipad and visa versa. I really don't understand what it is that i am doing wrong...
These are the media queries that i am using:
#media all and (device-width : 768px) and (orientation: landscape) {}
#media all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){}
Here is a link to the site www.imarken.dk
The problem is in min-device-width. Try to use 481 instead 768.
Give these a whirl:
#media only screen and (device-width: 768px) {
/* targets iPad */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* targets iPad Portrait */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* targets iPad Landscape */
}
I had this same problem today! As it turns out, removing my height=device-height in the meta viewport tag fixed the issue and allowed the CSS to switch between portrait and landscape as expected. Hope this helps!