Macbook Pro视网膜开发

Question

Hi I am developing a website click here
and my client sent me that screenshot below. This is a macbook retina pro. I 've no idea why but it seems like it's got a resolution about 1024x640 and the browser viewport is about 500px(!). So I have two questions: 1.When you take your macbook pro retina out of the box what is the default resolution and pixel density?
2.How can you emulate a retina display on a non mac? I've tried the new emulation options in chrome but every time I've set device pixel ratio 2 and played with resolution I never got any usable output.Using VM is pointless due to low resolution.

EDIT: one more thing I've noticed. If I reproduce that same resolution on my browser everything looks more "zoomed out" (bigger) the on the image attached. Is it possible that the bottom toolbar scales the whole web site down or it's the pixel density related?

Answer 1

1. Default resolution on the MacBook Pro with Retina Display (15") is 1440x900 at 2:1 pixel ratio (using the 2880x1800 screen). However, there are a lot of scaled modes.

2. Although I don't know of a good way to simulate a retina display on a non-Macintosh desktop or laptop, Safari browsing on Retina MacBook Pro is similar/identical to Safari on iPad/iPhone in terms of how it handles the display resolution issues. If you have a Retina iPad that's probably a better simulator, but you won't have access to developer tools since those are only available when paired with a Mac.

If you have access to a non-Retina Mac, you can also try using the HiDPI modes (see the posting about enabling HiDPI modes ) to give you access to how the web server would see a Mac if the display were retina.

Answer 2

I think this is the wrong approach, you don't need to emulate a Retina display, the only thing you need to worry about is that your website looks good also on 1440x900 and that your assets have an option to be served for Retina displays, HiDPI as @gaige mentioned.

And you can load those like this http://paulstamatiou.com/responsive-retina-blog-development-part-2/

Other than that, it's just a matter of using best practices, and everything should work itself out.