Media Query for Samsung Galaxy Tab 4 - 7 inch

问题

i am targeting my application for various Android Tablet devices. Mainly 10 inch and 7 inch Samsung and Nexus.

To target Samsung Galaxy Tab 7 inch used the below media query, 1024x600 px. It works fine in Galaxy tab 2, 3 of 7inch. But not working for Galaxy Tab 4 7 inch.

@media only screen and (max-width: 1024px) and (orientation : landscape)
{ }

Samsung Galaxy Tab 4.0 7 inch uses the following screen specification. Which is same for Samsung Galaxy 4.0 10.1 inch Model - SM-T530NYKAXAR. So on my 7inch Galaxy Tab 4, it uses the media query of Samsung Galaxy tab 4.0 10inch and loads the HTML pages odd.

How to target Samsung Galaxy Tab 4.0 7inch via media query.

Screen Specification:

Physical Size: 7 inch

Resolution: 1280x800 (Landscape)

Pixel Density: 216 ppi

Thanks.

回答1:

I've created this and tested it on the device and it seems to be highly targeted and works.

@media only screen 
and (min-device-width: 800px) 
and (max-device-height: 1280px) 
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : portrait) 

{
  .galaxy {background-color:red;}
  .onlygalaxyportrait {display:block !important; background-color:green;}



}

@media only screen 
and (min-device-width: 1280px) 
and (max-device-height: 800px) 
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : landscape) 

{
  .galaxy {background-color:yellow;}
  .onlygalaxyland {display:block !important; background-color:orange;}






}

来源：https://stackoverflow.com/questions/25375313/media-query-for-samsung-galaxy-tab-4-7-inch

标签

css

media-queries

hybrid-mobile-app