移動端頁面適配ipad？

標籤：AC   meta   ice   SM   需要   事件   document   nta   div   

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？