Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.
I want to target iPad only using CSS3 media query. Since, device width of LG and iPad is same 768px - I am having trouble separating each device.
I have tried following to separate, but does not seem to be working:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */
I don't know the -webkit-device-pixel-ratio and other -webkit* options and their values to target for iPad. I don't want to use JavaScript for styles, any ideas?
This question is related to
ipad
css
webkit
media-queries
<html>
<head>
<title>orientation and device detection in css3</title>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div id="iphonelandscape">iphone landscape</div>
<div id="iphoneportrait">iphone portrait</div>
<div id="ipadlandscape">ipad landscape</div>
<div id="ipadportrait">ipad portrait</div>
<div id="htcdesirelandscape">htc desire landscape</div>
<div id="htcdesireportrait">htc desire portrait</div>
<div id="desktop">desktop</div>
<script type="text/javascript">
function res() { document.write(screen.width + ', ' + screen.height); }
res();
</script>
</body>
</html>
I am a bit late to answer this but none of the above worked for me.
This is what worked for me
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
//your styles here
}
this is for ipad
@media all and (device-width: 768px) {
}
this is for ipad pro
@media all and (device-width: 1024px){
}
You need to target the device by its User Agent, using some script. The user agent for the iPad is:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
body{
background: red !important;
}
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
body{
background: green !important;
}
}
In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.
Well quite same question and there is also an answer =)
http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1
@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...
I can not test it currently so please test it =)
Also found some more:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
Or you check the navigator with some javascript and generate / add a css file with javascript
These days you can use a Media Queries Level 4 feature to check if the device has the ability to 'hover' over elements.
@media (hover: hover) { ... }
Since the ipad has no 'hover' state you can effectively target touch devices like the ipad.
Source: Stackoverflow.com