Материал Угловой с NavBar не реагирует на браузер iPhone

Я новичок в дизайне материалов с использованием угловых. Я использую этот код от codepen в качестве руководства по изучению углового материала. Что я заметил, так это то, что он реагирует при визуализации в браузере рабочего стола с помощью Chrome, но ведет себя как обычный html при визуализации на iPhone с использованием браузера по умолчанию iPhone 5. Имеет ли материал не отзывчивую поддержку функций для Safari?Материал Угловой с NavBar не реагирует на браузер iPhone

<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"> 

    <md-toolbar class="md-theme-indigo"> 
    <h1 class="md-toolbar-tools">Sidenav Left</h1> 
    </md-toolbar> 
    <md-content layout-padding="" ng-controller="LeftCtrl"> 
    <md-button ng-click="close()" class="md-primary" hide-gt-md=""> 
     Close Sidenav Left 
    </md-button> 
    <p hide-md="" show-gt-md=""> 
     This sidenav is locked open on your device. To go back to the default behavior, 
     narrow your display. 
    </p> 
    </md-content> 

</md-sidenav> 

<md-content flex="" layout-padding=""> 

    <div layout="column" layout-fill="" layout-align="top center"> 
    <p> 
    The left sidenav will 'lock open' on a medium (&gt;=960px wide) device. 
    </p> 
    <p> 
    The right sidenav will focus on a specific child element. 
    </p> 

    <div> 
     <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md=""> 
     Toggle left 
     </md-button> 
    </div> 

    <div> 
     <md-button ng-click="toggleRight()" class="md-primary"> 
     Toggle right 
     </md-button> 
    </div> 
    </div> 

    <div flex=""></div> 

</md-content> 

<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right"> 

    <md-toolbar class="md-theme-light"> 
    <h1 class="md-toolbar-tools">Sidenav Right</h1> 
    </md-toolbar> 
    <md-content ng-controller="RightCtrl" layout-padding=""> 
    <form> 
     <md-input-container> 
     <label for="testInput">Test input</label> 
     <input type="text" id="testInput" ng-model="data" md-sidenav-focus=""> 
     </md-input-container> 
    </form> 
    <md-button ng-click="close()" class="md-primary"> 
     Close Sidenav Right 
    </md-button> 
    </md-content> 

</md-sidenav>

здесь скриншот iPhone

ниже ожидаемого скриншоте поведения от настольного браузера

источник

2015-08-18 TwoThumbSticks

Вы пробовали определить область просмотра? Положите этот тег в <head>: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

источник

2015-08-18 14:32:10 MarcusAsplund

Полностью упускается из виду тот. Спасибо. Я добавил в раздел главы , и теперь все работает нормально. – TwoThumbSticks

Материал Угловой с NavBar не реагирует на браузер iPhone

ответ

Смежные вопросы