移動端頁面適配ipad？
阿新 • • 發佈：2018-04-28
header mini index use 處理 name pre var minimum
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上默認顯示的是橫屏顯示的，點擊事件，布局都會受到影響。
移動端頁面適配ipad？