Answer the question
In order to leave comments, you need to log in
How to switch to minimal view when swiping a page in iOS Safari/Android Chrome (portrait)?
Hello!
Such a question : what determines the transition to minimal view when scrolling the page in iOS Safari / Android Chrome? (portrait orientation)
Problem : when scrolling, the application does not go to minimal view neither in iOS Safari / nor in Android Chrome in portrait orientation. In Safari, it goes if the address bar is moved up, as if scrolling.
Stack : Laravel 8/Vue js 2.6.12/TailwindCss,Bootstrap 5 I was
looking for a solution. Closest topic: https://stackoverflow.com/questions/24889100/ios-8 ... . Where it says to wrap the page with overfow:auto/hidden
, but that doesn't work, quote:
A common approach to the problem is to have a wrapper div that fills the browser viewport, set overflow to hidden or auto, then scroll horizontally and/or vertically inside it.
<!-- resources/views/basic.blade.php -->
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vue JS: Steilgut demo | @yield('title', 'Vue JS: Steilgut demo 2')</title>
<meta name="description" content="Vue JS: Steilgut demo 2" />
<meta name="keywords" content="Vue JS: Steilgut demo 2" />
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
{{-- <script type="text/javascript" src="./js/vue.js"></script> --}}
{{-- <script type="text/javascript" src="./js/vue-router.js"></script> --}}
<!-- <link rel="stylesheet" href="css/reset.css"/> -->
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name=apple-mobile-web-app-capable content=yes>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
{{-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> --}}
@yield('exp_head')
</head>
<body class="fp">
@yield('content')
</body>
</html>
@extends('layouts.master')
@section('exp_head')
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<link href="{{ asset('css/normalize.css') }}" rel="stylesheet" />
{{-- <link href="{{ asset('css/fonts.css') }}" rel="stylesheet"> --}}
{{-- <script src="https://use.fontawesome.com/2ba7753f9f.js"></script> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
<script src="/js/events.js"></script>
<script src="{{ asset('js/app.js') }}" async></script>
@endsection
@section('content')
<div id="app" class="fp" v-cloak>
<router-view></router-view>
</div>
@endsection
<template>
<div
id="masthead"
class="steilgut-masthead ar-balanced-page"
:style="getStyleClassList"
>
<div class=”masthead-content”>
<header>...</header>
<transition name="routes-fade">
<router-view />
</transition>
<footer></footer>
</div>
</div>
</template>
html, body =>
...
html {
width: 100%;
height: 100%;
height: 100vh;
height: -webkit-fill-available;
height: -moz-available;
}
body {
height: 100%;
min-height: 0; // flex box stops to stretch to content size so we can scroll
width: 100%;
width: 100vw;
width: -moz-available;
width: -webkit-fill-available;
min-width: 100%;
min-width: 100%;
min-width: 100vw;
min-width: -moz-available;
min-width: -webkit-fill-available;
margin: 0;
padding: 0;
overflow: hidden;
}
...
app.scss =>
...
#app {
display: flex;
flex: 1 0 100%;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
..
.steilgut-masthead,
.masthead-content {
display: flex;
flex: 1 0 100%;
flex-direction: column;
width: 100%;
min-width: 100%;
height: 100%;
align-items: stretch;
/* border: 2px solid #ebcb9a; */
}
.steilgut-masthead {
position: relative;
z-index: 5;
overflow: auto;
max-width: 100%;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question