CODEWITHSUNDEEP
androidiphonecssipadtablet
AnchovyLegend
AnchovyLegend

Reputation: 12538

Styling for various screen resolutions (smart phones, tablets, laptops, etc.)

I am trying to design a site that is easily accessible from tablets, smart phones, and desktops, and is equally usable from any device.

After a bit of reading, I found mixed numbers for the iPhone 4 resolution, which is 620px - 760px.

I am aware of using the following CSS to detect the type of media. However, the following CSS is not applied on my iPhone 4. 

//detect smart phone 
@media screen and (min-width:1px) and (max-width:780px) {
    .inner-main-header{border:2px solid brown;}

}

Any ideas why this is? any suggestions what I can do in this case? my goal is to simply use one particular CSS for tablets and another for smart phones.

I appreciate any suggestions.

Many thanks in advance!

Upvotes: 0

Views: 407

Answers (2)

rogMaHall
rogMaHall

Reputation: 691

I believe it'd be min-device-width and max-device-width. Also, your pixels look a bit off:

//detect smart phone 
@media screen and (max-device-width:640px) {
    .inner-main-header{border:2px solid brown;}

}

//detect tablets
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    .inner-main-header{border:2px solid black;} //changed to black just to see difference
}

Upvotes: 1

Kyle
Kyle

Reputation: 2379

honestly I would use a site like this to redirect users to appropriate subdomains with their own respective css. If you opt not to do such a thing, I would suggest just using css to scale all the media based on screen size using values such as max-width: 100% and width:auto\9. Another good tutorial would be this youtube video good luck!

Upvotes: 0

Related Questions