CSS Media Queries for tablets & mobiles

CSS media queries are an excellent way to deliver different styles to different devices.

Here are the Media Queries for targeting your iPad in portrait or landscape mode. These media queries will target all iPad models.

Ipad Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 

	.your-class-here {
		background:black;
	}

}

Ipad Landscape

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

	.your-class-here {
		background:black;
	}

}

Ipad Portrait

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

	.your-class-here {
		background:black;
	}

}

Here are the Media Queries for targeting your iPhone in portrait or landscape mode. These media queries will target iPhone 6+, 7+ and 8+.

iPhone 6+, 7+ and 8+ Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 

	.your-class-here {
		background:black;
	}

}

iPhones 6+, 7+, 8+ Portrait

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 

	.your-class-here {
		background:black;
	}

}

iPhones 6+, 7+, 8+ Landscape

/* Landscape */
@media only screen 
  and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 

	.your-class-here {
		background:black;
	}

}

Here are the Media Queries for targeting your iPhone X in portrait or landscape mode. These media queries will target the iPhone X.

iPhone X Landscape & Portrait

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 

.your-class-here {
		background:black;
	}

}

iPhone X Portrait

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 

.your-class-here {
		background:black;
	}

}

iPhone X Landscape

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) { 

.your-class-here {
		background:black;
	}

}
Share
Tweet
Share