MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS Width vs Viewport

When we are using "width" with media queries it is important to set the meta tag correctly. Basic meta tag looks like this and it needs to be put inside the <head> tag.

<meta name="viewport" content="width=device-width,initial-scale=1">


Why this is important?

View-port is the width of the device itself. If your screen resolution says the resolution is 1280 x 720, your view-port width is "1280px".

More often many devices allocate different pixel amount to display one pixel. For an example iPhone 6 Plus has 1242 x 2208 resolution. But the actual viewport-width and viewport-height is 414 x 736. That means 3 pixels are used to create 1 pixel.

But if you did not set the meta tag correctly it will try to show your webpage with its native resolution which results in a zoomed out view (smaller texts and images).


Often times, responsive web design involves media queries, which are CSS blocks that are only executed if a condition is satisfied. This is useful for responsive web design because you can use media queries to specify different CSS styles for the mobile version of your website versus the desktop version.

Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px

@media only screen and (min-width: 300px) and (max-width: 767px) {
 .site-title {
 font-size: 80%;
 }
}


Styles in this block are only applied if the screen size is over 1024px wide.

@media only screen and (min-width: 1024px) {
 .site-title {
 font-size: 120%;
 }

}


Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px

@media only screen and (min-width: 768px) and (max-width: 1023px) {
 .site-title {
 font-size: 90%;
 }
}




Conclusion

In this page (written and validated by ) you learned about CSS Width vs Viewport . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Media queries and IE8.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.