CSS media query to target iPad and iPad only

Question

Hi I am working with multiple tablet devices  iPad  Galaxy Tab  Acer Iconia  LG 3D Pad and so on    iPad - 1024 x 768 LG Pad - 1280 x 768 Galaxy Tab - 1280 x 800   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Finally found a solution from   Detect different device platforms using CSS   lt link rel  stylesheet  media  all and  device-width  768px  and  device-height  1024px  and  orientation portrait   href  ipad-portrait css    gt   lt link rel  stylesheet  media  all and  device-width  768px  and  device-height  1024px  and  orientation landscape   href  ipad-landscape css    gt    To reduce HTTP call  this can also be used inside you existing common CSS file    media all and  device-width  768px  and  device-height  1024px  and  orientation portrait       ipad-portrait   color  red       your css rules for ipad portrait       media all and  device-width  1024px  and  device-height  768px  and  orientation landscape       ipad-landscape   color  blue       your css rules for ipad landscape        Hope this helps   Other references    https   developer apple com library content documentation AppleApplications Reference SafariCSSRef Articles OtherStandardCSS3Features html

User · Answer

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

User · Answer

lt html gt   lt head gt       lt title gt orientation and device detection in css3 lt  title gt        lt link rel  stylesheet  media  all and  max-device-width  480px  and  orientation portrait   href  iphone-portrait css    gt       lt link rel  stylesheet  media  all and  max-device-width  480px  and  orientation landscape   href  iphone-landscape css    gt       lt link rel  stylesheet  media  all and  device-width  768px  and  device-height  1024px  and  orientation portrait   href  ipad-portrait css    gt       lt link rel  stylesheet  media  all and  device-width  768px  and  device-height  1024px  and  orientation landscape   href  ipad-landscape css    gt       lt link rel  stylesheet  media  all and  device-width  800px  and  device-height  1184px  and  orientation portrait   href  htcdesire-portrait css    gt       lt link rel  stylesheet  media  all and  device-width  800px  and  device-height  390px  and  orientation landscape   href  htcdesire-landscape css    gt       lt link rel  stylesheet  media  all and  min-device-width  1025px   href  desktop css    gt    lt  head gt   lt body gt       lt div id  iphonelandscape  gt iphone landscape lt  div gt       lt div id  iphoneportrait  gt iphone portrait lt  div gt       lt div id  ipadlandscape  gt ipad landscape lt  div gt       lt div id  ipadportrait  gt ipad portrait lt  div gt       lt div id  htcdesirelandscape  gt htc desire landscape lt  div gt       lt div id  htcdesireportrait  gt htc desire portrait lt  div gt       lt div id  desktop  gt desktop lt  div gt       lt script type  text javascript  gt          function res     document write screen width          screen height             res         lt  script gt   lt  body gt   lt  html gt

User · Answer

this is for ipad  media all and  device-width  768px          this is for ipad pro  media all and  device-width  1024px

[ipad] CSS media query to target iPad and iPad only?

Examples related to ipad

Examples related to css

Examples related to webkit

Examples related to media-queries