I try to create a starter app with Capacitor and Svelte. Everything works fine except one thing, when I use native html anchor ( with svelte-routing) for navigate the there is a slow respond time to user interaction, maybe 400ms before app react on my Iphone 13 pro (real device) Ios 15. Same issue for native html buttons across my starter.
can you tell me if i did something wrong please ?
the starter repos -> https://github.com/flameapp-io/svelte-capacitor-tailwind-starter
My navigation component :
<script lang="ts">
import ThemeSwitch from '$lib/ThemeSwitch.svelte';
import { Link } from 'svelte-routing';
type NavLink = {
name: string;
url: string;
};
const navLinks: Array<NavLink> = [
{
name: 'Home',
url: '/'
},
{
name: 'Example',
url: 'example'
}
];
</script>
<nav class="flex items-center">
{#each navLinks as link}
<Link to={link.url} class="mx-5">{link.name}</Link>
{/each}
<ThemeSwitch />
</nav>
I've solved this issue by add this :
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
In my index.html
EDIT
Safari will automatically introduce a 300ms delay to account for users potentially double tapping on a page to zoom in. This is not needed though if you include a proper viewport meta in the head of the index.html.
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
If this viewport is provided, Safari will not introduce a delay in a click/tap. Here is a reference to a Safari issue which resolves this issue.
Related
I have a site which I am trying to get to site perfectly in all mobile devices. for that purpose i set viewport meta like below
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It seems works perfectly on the most of the devices but on the iOS devices, it seemingly ignores the meta viewport tag. I tried workarounds like
1: Added the meta tag with some delay
<body onload="javaScript:onloadHandler();">
<script type="text/javascript">
function onloadHandler() {
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;');
document.getElementsByTagName('head')[0].appendChild(meta);
if (typeof window["bodyOnload"] != 'undefined') {
bodyOnload();
}
}
</script>
Result : Most of the time it doesn't show the zoom level correctly. Some times the page is top left cornered.
Calculated the scale from device pixel ratio and used that scale value for initial scale.
<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
var viewportTag = "<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";
document.write(viewportTag);
</script>
Result : it doesn't show the zoom level correctly.
It looks the issue is with initial-scale value.
Does anyone have any ideas how I can get it to the correct zoom level with iOS 8?
EDIT:
This issue comes from iOS 8. The scaling issue happens only when the user tries to open multiple popup windows. There is one bug with popup windows with iOS 8. Hope the scaling issue will be fixed once Apple fixed the issue with popup windows.
This issue is resolved with new update for 8.1.2.
Hi Im developing a sencha-touch-2 app which will be embedded on iPhone UIWebview. The UIWebview size is 280x420 which is centered on the iPhone screen. Everything works perfect on sencha development but when I try to build the sencha into production, the size of the sencha page streched or not fit to the size of the UIWebview. Please see code below
SENCHA
Adding meta tag to the body of index.html
<body>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
This code works on development but when change to production the page change. What should I do to make it on the production build, since production is very fast on loading.
Try this, just add this script in your html body tag.
<script type="text/javascript">
setTimeout(function(){
var meta = document.createElement('meta');
meta.setAttribute("name","viewport");
meta.setAttribute("content","width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(meta);
},1000);
</script>
Sencha touch 2.0 will overwrite your script with it's built in meta tag. So, what happen is your meta tag will be loaded but will be replaced by it's own meta tag.
Following is head section:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<script src="http://www.google.com/jsapi"></script>
<script>
window.top.scrollTo(0, 1);
alert('ok');
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.8.0");
</script>
</head>
using iOS 4.2.1
Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
You cannot programmatically hide the toolbar in Mobile Safari.
Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim
I am writing a home-screen web app with a video element in Mobile Safari. For usability reasons, I would prefer that swiping on the screen does not make the page scroll. I can successfully prevent swipes from scrolling using the following code. However, if a user swipes on the video element, the page scrolls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>no scroll</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
};
</script>
</head>
<body>
<p>anything but the video will be stationary when swiped.</p>
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100">
<source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>
I have tried adding code to prevent the video element from swallowing those events (inserted into the window.onload function):
var videoEl = document.getElementById('video');
videoEl.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
videoEl.addEventListener('touchstart',function(event){
event.preventDefault();
},false);
Is there a workaround for this? Am I addressing the problem the wrong way?
I'd recommend putting a shim on top, that is, a blank div with a higher z-index to catch the touch events. I don't have a chance to test now, but should be pretty easy to try out.