문제

본래 확보될 여백 외에 또 한 단계 여백이 붙어 버린다.

「저장→라이브리 로드」라고 하면 여백이 정상으로 돌아올 때가 있다.
ons-spllitter를 사용한 것이 나쁜 것일지도 모른다. 현재 조사 중.

출처

<ons-page>
    <ons-splitter>
        <ons-splitter-side animation="default" var="side" side="left" collapse="portrait" swipeable swipe-target-width="50px" width="220px">
            <ons-page>
                <ons-list>
                    <ons-list-header>メニュー</ons-list-header>
                    <ons-list-item tappable>ログアウト</ons-list-item>
                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content var="content">
            <ons-page>
                <ons-toolbar>
                    <div class="left"><ons-back-button>Back</ons-back-button></div>
                    <div class="center">Page 1</div>
                </ons-toolbar>
            </ons-page>
        </ons-splitter-content>
    </ons-splitter>
</ons-page>

해결책

우선 상태 표시줄 표시 자동 조정을 비활성화하고,

// Appモジュール定義
var app = ons.bootstrap('app', ['onsen']);
ons.disableAutoStatusBarFill();

index.html 헤더에 오래된 좋은 패치를 넣습니다.

<script>
    function onDeviceReady() {
        if ( window.device.platform === 'iOS' && parseFloat(window.device.version) >= 7.0 ) {
            document.body.style.marginTop = "20px";
        }
    }
    document.addEventListener('deviceready', onDeviceReady, false);
</script>

일단 이것으로 OK.

Reference

이 문제에 관하여(Monaca에서 OnsenUI 2 Beta.9를 사용하면 상태 표시 줄 여백이 어려워집니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/puku0x/items/ffbe5c28ac9c1c291df7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다