问题：有一个布局如下所示
这个布局是按照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。必须是加起来不超过。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
