Mac Book的Retina高清显示屏下页面显示与固定宽度问题

问题：有一个布局以下所示

这个布局是按照1920px的显示屏宽度进行设计的，一整个页面只显示这个，没有滚动条。可是，这个页面在Mac Book的windows系统下显示时，登陆按钮超过了一页高度，移动了页面以外，因为没有滚动条，所以无法点击到登陆按钮了。

分析缘由：当初进行页面布局时，是按照设计稿的尺寸来的。这个页面主要由如图所示几个尺寸组成

Logo的上边距（Margin-top）、Logo自己的高度、Logo的下边距、以及登陆信封的高度。假设以上4个的高度分别是130px、80px、80px、520px，那这个页面所须要的最小高度则为：130+80*2+520=810px。若是一个显示器是小屏的，它的高度（浏览器的高度，屏幕高度的分辨率减去工具栏、底部图标区等）小于810px，那么就没法彻底显示这个页面。也就是说，不须要是Mac Book笔记本，任何电脑，当它的高度小于810px 时都会出现问题，因此，这样的布局是存在问题的。

备注：咱们通常是不考虑显示器高度对页面的影响的，只会考虑宽度对布局的影响。所以任何页面都会有上下拉的滚动条，而左右拉动的滚动条则是咱们没法接受的。因此，咱们一般不会考虑高度对布局的影响。这里之因此考虑高度的影响，是由于这个页面是没有滚动条的，背景图占据整个页面。因此，当你设计一个没有滚动条的页面时，显示器高度对布局的影响你切记要考虑进去了。

解决方法：实际上没有特别好的解决方法。最好的方法是这样的，无论浏览器的高度是多少，所要显示的内容都能垂直居中。但显然，margin值能够随着浏览器高度改变而改变，可是图片的高度是固定的，当浏览器的高度比展现内容最小的高度（即去除了任何边距边框等，只是内容自己的高度）还要小时，仍然会出现上述问题。因此，最好是图片的大小也能随着浏览器的高度不断的变化，包括文字的大小、按钮的大小等。可是，垂直居中始终是布局中一个难题，这点网上不少帖子都有说明。目前来讲，最好的垂直居中方案是流式布局（Flex），能够比较完美的实现垂直居中，或者经过绝对定位。但高度变化状况下让图片自适应改变尺寸又是比较难的问题。由于，一般图片自适应是：

img{
max-width:100%;
height:auto;
}

可是，咱们不多有限制高度的吧，因此怎么去定义这个max-height呢？比较烦。

问题没解决，可是先来讲说，这个问题又怎么和Mac的Retina的高清屏扯上关系的呢。

Mac电脑采用的是一种叫作Ritina的高清显示屏，它的分别率比通常显示器要高。在一个Mac笔记本上，它的屏幕物理尺寸是很小的，可是分辨率很高（一般为2560 x 1600）。那咱们正常的页面在Mac上会怎么显示呢？好比咱们写一个1000px的div，在1920px宽的显示屏上大概占据整个浏览器的一半，可是在Mac中只能显示1000/2560大小，也就是说，显示的尺寸变小了。这就存在一个问题，因为尺寸变小，里面的文字等内容所有变小，咱们在1920px下能看清的东西，在Mac下因为文字变小（注意，不是由于模糊，而是因为变小）看不清楚。但看不清楚，页面显示仍是完整的，不会出现一开始说的登陆按钮超过页面不显示了。问题是，在Mac笔记本的Windows系统下，它默认显示是200%显示（Win 10右键--显示设置--规模和布局查看）。这是操做系统为高清屏默认设置的，就是让用于能看清被缩小了的页面。因为200%，至关于各尺寸都放大了2倍，因此固然登陆按钮超过页面不见了。

我最后的一个勉强的解决方法是经过JS。window对象有个devicePixelRatio属性，能检测设备像素比。它不是默认200%吗，那它的devicePixelRatio的值就是2。我检测当它大于1时，即此时是在Mac下的windows系统操做时，改变各个margin和图片的大小值，而在正常显示时，不改变。

其实这方法也很差，但限于水平有限，只能遇到这个问题就针对这个问题解决，全局通用的不会。

而后还想说说固定宽度的问题。因为上面说了200%，而Mac一般宽度是2560px宽，因此建议，你的宽度不要超过1200px（1200px * 2 =2400px <2560，不会产生滚动条）。固然，这里说的是整行全部元素的宽度不超过1200px，你不能左侧Left固定宽度500px没超过1200，右侧Right又来个1000px说也没超过1200。必须是加起来不超过。