移动端页面适配ipad?

1、 @custom-media --sm (min-width576px);

@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上默认显示的是横屏显示的,点击事件,布局都会受到影响。











相关文章