CODEWITHSUNDEEP
htmlcssmobilemedia-queries
styler
styler

Reputation: 16501

Creating the correct media query breakpoints to cover mobile and tablet

Basically I'm building a site that requires 2 media queries, 1 that will cover mobile and another that will cover tablet. That's the requirements.

The problem I have is this for mobile the max-width would have to be 640px to cover Samsung Galaxy S3 but for tablet the Nexus 7 max-width in portrait is 599 so I run the risk of my phone falling into the tablet query.

Can anyone advise how i can get round this?

Upvotes: 0

Views: 2151

Answers (3)

DragonKnight
DragonKnight

Reputation: 1870

see this for mobile and tablet: you can find the correct size on the actual device if you run it in a test page.

https://jsfiddle.net/t2bybrdu/

html: 

<div class="body-test">
      <div class="center green-btn">Browser size tester:</div>
      </br>
      </br>
      <div class="result"></div>
</div>

js: 

$(".body-test .center").click(function(){
    var browser_size = $( window ).width();
    console.log( browser_size + 20);
    console.log( "viewport size: " + Number(20 + browser_size) );
    $(".body-test .result").text("Your viewport size is: " + Number(browser_size + 20) + "px");     
});

css:

.green-btn {
    display: block;
    background: green;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    width: 180px;
}
.body-test {
    padding-top: 120px;

}
.body-test  .result {
    text-align: center;
    font-weight: bold;
    padding: 3em auto;
}

.body-test  .center {
    position: relative;
    left: calc(50% - 100px); 
    cursor: pointer;
}

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

I had a very similar problem. I've tried all possible media queries. In order to differentiate tablets and phones you have to use max-device-width media query with physical dimensions, not the one with pixels width.

Here is excerpt of my CSS used to target tablets in landscape orientation, please take a look at the max-device-width:

@media screen and (max-device-width: 1280px) and (orientation: portrait),
screen and (max-device-width: 23cm) and (orientation: landscape),
screen and (orientation: landscape) and (max-device-width: 1280px) and (max-device-height: 1000px)

I have used this query on iPad (non-retina), iPad 2 (retina) and ASUS Transformer tablet. Specifying size in cm works just fine, inches in were not working on some tablets (can't recall which ones at the moment).

Reference to official description of max-device-width media query: http://www.w3.org/TR/css3-mediaqueries/#device-width

Upvotes: 1

wandarkaf
wandarkaf

Reputation: 1889

You can apply this settings. It works well (at least for me):

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Upvotes: 3

Related Questions