-1

I am using the following media queries as these happened to be the breakpoints: 

@media only screen and (max-width: 1022px)
@media only screen and (max-width: 900px)
@media only screen and (max-width: 816px)
@media only screen and (max-width: 766px)
@media only screen and (max-width: 750px)
@media only screen and (max-width: 700px)
@media only screen and (max-width: 668px)

however on an ipad or smartphone (Phone resolution max width of 668px) it still displays the generic css but on a browser resize to the device resolution it shows correctly - Do I have to create device specific queries?

SW4
  • 69,876
  • 20
  • 132
  • 137
user4349555
  • 123
  • 1
  • 12
  • 1
    Have u specified – Sydonia Feb 04 '15 at 09:11
  • Although the linked duplicate is inherantly related...Im not sure it is an exact duplicate to the point of meriting this question be closed? OP notes: `ipad or smartphone`, not specifically iPhone 5 – SW4 Feb 04 '15 at 09:33
  • @SW4 I had closed it based on OP's comment on my answer: http://stackoverflow.com/questions/28317421/css-media-queires-not-affecting-devices/28317454?noredirect=1#comment44983942_28317454 – James Donnelly Feb 04 '15 at 09:35
  • @JamesDonnelly - Hmm, even reading those comments, it doesnt seem close enough to be marked as a duplicate? OP goes on to note as much - may be a poorly worded question :S – SW4 Feb 04 '15 at 09:37
  • @SW4 the question is asking for media queries which cover a wide range of devices. This question is 1. very broad, and 2. answered in many different other questions here on SO. The one I had closed it as (http://stackoverflow.com/questions/12539697/iphone-5-css-media-query) covers all iPhone and iPad devices - various other questions will cover all other devices. – James Donnelly Feb 04 '15 at 09:39
  • @JamesDonnelly likely subjective, but as such and in the interests in guiding future traffic, I would tend to suggest it should be closed for being too broad / with relevant vote, as opposed to being closed as a duplicate of a question which relates to iPhone5 specifically, and which the OP themselves has noted does not provide the answer. – SW4 Feb 04 '15 at 10:17

5 Answers5

1

An iPad has a 1024x768px resolution, so naturally will not be targetted by any of those queries. Instead of using max-width, you should use max-device-width:

@media only screen and (max-device-width: 1022px)
@media only screen and (max-device-width: 900px)
@media only screen and (max-device-width: 816px)
@media only screen and (max-device-width: 766px)
@media only screen and (max-device-width: 750px)
@media only screen and (max-device-width: 700px)
@media only screen and (max-device-width: 668px)
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • I'm not trying to target only an ipad...I want the queries to cover all usage ideally. – user4349555 Feb 04 '15 at 09:13
  • @user4349555 that's a different question to the one you've asked. http://stackoverflow.com/questions/12539697/iphone-5-css-media-query – James Donnelly Feb 04 '15 at 09:15
  • 1
    No it isn't. I said on an iPad or smartphone - nowhere did i say i was specifically targeting apple devices or I would have said iPhone too. – user4349555 Feb 04 '15 at 09:33
  • @user4349555 the problem is that this question has been asked and answered multiple times here. The question of *why isn't this particular set of media queries working* - the question I've answered - is great, the question of *how can I target multiple devices with media queries* is bad. – James Donnelly Feb 04 '15 at 09:36
  • Thanks for your opinion - which doesn't help my situation. – user4349555 Feb 04 '15 at 10:00
0

Please use the viewport inside of head tag 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
0

On mobile devices the viewport size is a bit more complicated then on desktop screens. By default they basically display the site in the "virtual viewport" that varies between 800-1000px in different browsers, and then scale it to fit the physical screen. See the classic article by Peter-Paul Koch: http://quirksmode.org/mobile/viewports2.html

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
0

Add like this it will work: 

/* 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 */
    }

For reference:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

rajesh
  • 1,475
  • 10
  • 23
-1

@media only screen and (max-width: 668px) and (min-width:xxxpx)

need set min-width also.

gu mingfeng
  • 1,010
  • 8
  • 10