Return to site

Making media queries for mac laptop retina display

broken image

In addition, the page layout not only needs to look good in a small browser window, but be usable too. So for your site to work well on a mobile browser, it needs to present important information near the top of the page use an easy-to-read font and not overwhelm the user with too much content in the page. Typically, though, the user will need to zoom in if the want to read the text in your page.Īnother consequence of a smaller display is that more of your page content will be “below the fold”, requiring users to scroll through your page content more often. Most modern mobile browsers compensate for this by allowing the user to zoom in and out easily, as well as adapting font sizes to make text more readable.

broken image

An iPhone retina display is 960 x 640 pixels, whereas the smallest-screen iMac has a 1920 x 1080 display.Ī smaller display means that the user can see a lot less information at once.

broken image

Fewer pixels: Most mobile displays currently have fewer pixels than desktop displays.This compares to a typical notebook screen size of 13-17 inches, and a desktop screen size of 20-30 inches.

broken image

Let’s start with one of the most obvious differences: Mobile browser displays are smaller than their desktop counterparts.