div.cellphone {display:none;}
div.noncellphone {display:block;}
and
/* START Make the cart table responsive */
/* http://css-tricks.com/responsive-data-tables/ */
@media screen and (max-width: 600px) { /* Force table to not be like tables anymore */
div.cellphone {display:block;}
div.noncellphone {display:none;}
[How to target iPhone 5]
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
/* iPhone 4 (landscape) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) {
.background img {
height: 5px;
}
}
/* iPhone 4 (portrait) */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) {
.background img {
height: 10px;
}
}
/* iPhone 5 (landscape) */
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) {
.background img {
height: 245px;
}
.logo img {
height: 205px;
width: 205px;
}
}
/* iPhone 5 (portrait) */
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:portrait) {
.background img {
height: 210px;
}
.logo img {
height: 170px;
width: 170px;
}
.top-content h2 {
font-size: 1.8em;
line-height: 120%;
margin-bottom: 20px;
}
.main-container {
margin-top: 30px;
margin-left: 15px;
margin-right: 15px;
}
}
Targets
Device Device width Device height Pixel ratio
HTC One 360 640 3
Samsung Galaxy S2 320 534 1.5
Samsung Galaxy S3 320 640 2
Samsung Galaxy S4 320 640 3
Samsung Galaxy S5 360 640 3
LG Nexus 4 384 592 2
LG Nexus 5 360 592 3
Asus Nexus 7 601 906 1.33
iPad 1 and 2 768 1024 1
iPad Mini 768 1024 1
iPad 3 and 4 768 1024 2
iPhone 3G 320 480 1
iPhone 4 320 480 2
iPhone 5 320 568 2
iPhone 6 375 667 2
iPhone 6 Plus 414 736 3
Huawei Ascend P6 360 592 2
Huawei Ascend P7 360 592 3
OnePlus One 360 640 3