移动端页面适配ipad？

1、 @custom-media --sm (min-width: 576px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 992px);
@custom-media --xl (min-width: 1200px);
.info-header {
  @media (--md) {
    width: 50%;// ipad
  }
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #dddddd;//手机
}
2、 屏幕适配
根据不同屏幕动态写入font-size，以rem作为宽度单位，固定布局视口。
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
以640px设计稿和750px的视觉稿，网易这样处理的：
var width = document.documentElement.clientWidth;   // 屏幕的布局视口宽度
var rem = width / 7.5;                              // 750px设计稿将布局视口分为7.5份
var rem = width / 6.4;                              // 640px设计稿将布局视口分为6.4份
这样不管是750px设计稿还是640px设计稿，1rem 等于设计稿上的100px。故px转换rem时：
rem = px * 0.01;
在750px设计稿上：
75px 对应 0.75rem, 距离占设计稿的10%；

在ipone6上：
width = document.documentElement.clientWidth = 375px；
rem = 375px / 7.5 = 50px;
0.75rem = 37.5px;   (37.5/375=10%；占屏幕10%)
                     
在ipone5上：
width = document.documentElement.clientWidth = 320px；
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; (32/320=10%；占屏幕10%)3、ipone适配ipad需要设置- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
- (NSUInteger)supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskPortrait;
}
就会导致iPhone应用在ipad mini上默认显示的是横屏显示的，点击事件，布局都会受到影响。
来源：https://www.cnblogs.com/duanzhange/p/8966535.html
标签
ipad
rem
页面布局