@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (device-width: 768px) {
.socialIcons, a#fdbk_tab{
display: none;
}
}
Targeting only the ipad:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { }
If you are trying to target only landscape or portrait orientation, try the following:
and (orientation:landscape), like this:
@media only screen and (device-width: 768px) and (orientation:portrait){
/* Your rules here */
}
If you are using JS to further target orientation (portrait or landscape), you can try this:
if (window.orientation == -90 || window.orientation == 90) {
// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1.0";
total_width = 1024;
alert('Landscape' + window.orientation);
} else { // portrait mode
// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=0.7";
alert('Portrait' + window.orientation);}
A hacky way to test for the ipad / iphone in js is to check if orientation has been set:
if(typeof(window.orientation) != "undefined") { /* Stuff that will only run on iphone / ipad */ }