I have very bizarre problem. On mobile version of the website if I open it on desktop browser everything is fine, but when I open it on mobile browser I have some random numbers (781, 2e, 12e and so on) on some random areas.
AND this is happening on iphone 5S not on iphone 4s or 5!
even if I'm putting just pure html in it, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>blah blah in div</div>
<p>blah blah in paragraph</p>
</body>
</html>
still getting a unwanted 0 at the bottom:
I added this code
header("Cache-Control: no-transform");
at the very top of the page, even before:
<!DOCTYPE html>
and it worked!
We just noticed this same problem happening with the mobile version of all of our sites (thousands of sites). For us it appears to be happening on all devices, iphone & androids.
We tried the fix header("Cache-Control: no-transform"); and it does fix the issue.
** UPDATE: We have concluded this is some kind of proxy server issue by the mobile providers. When we switch to WIFI on both Android and Iphone the random characters disappear.
Related
I've added the pwa modules (or schematic) and I've setup my manifest.json file correctly. On an Android device, my service workers are engaged, I get the install to home screen prompt and the address bar disappears and I can see the native look and feel. However, on Chrome/Safari iOS there is no prompt. Is there anything I need to do programmatically/additionally?
iOS
My PWA's index.html includes the following iOS specific meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">
The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen:
Ref: PWA Tips and Tricks
Update March 2020
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
Sets apple-mobile-web-app-capable (opening without a browser chrome)
for display modes standalone, fullscreen or minimal-ui
Creates
apple-touch-icon images, adding the manifest background to transparent
icons: otherwise, iOS renders transparency as black
Creates dynamic
splash images, closely matching the splash images generated for
Chromium-based browsers
You may read more about the package on their documentation.
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:
Image credits: Andy Osmani (Getting started with Progressive Web Apps)
On the other hand, iOS does not support that PWA installation prompt.
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this:
Image credits: Expo
The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.
1) Touch Icons
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.
2) Splash Screens
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.
<head>
<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>
</head>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons
You may also check out this blog for the list of PWA features supported on iOS.
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true 🙃
Here is a code snippet for detecting if the app is on IOS and triggering a popup to add to home screen:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}
I use JavaScript in both iOS and on android to check if the app is in standalone mode and display a prompt on iOS and non-chrome browsers in android. I just let chrome do it's thing as it's efficient enough. On iOS, only safari supports service worker installs for now.
my website has a responsive design that is perfectly rendered in all devices. However it doesn't work when I use Safari's remote debugging. These are the steps to reproduce the error:
I open my site from my iPhone's Safari and it looks as expected.
The site also works fine in a mobile size using Desktop Chrome, Firefox and Safari.
I plug my iPhone to the Mac and inspect the website using Safari's remote debugging inspector: Safari > Develop > My Iphone > www.mysite.com Immediately the iPhone renders a wrong design. Elements don't respect their CSS size settings.
I close the inspector and reload the site from the iPhone and the site is rendered perfectly.
I have the viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I have tried other alternatives but this does not seem to be the problem. I use SASS and my CSS files are minified. I suspect that there's something wrong related to SASS.
I will appreciate any suggestion.
Thank you
I updated to Mojave and the error has been fixed. I guess that something was wrong in my Safari.
For the following code, it does not work on iOS Safari(iPad Air 2). It works everywhere else (Safari on Mac, Chrome on windows)
When I tried to debug the script below on the iPad's Safari (connected to Mac), it does not give any error. It is just silent. No speech.
Please not that this is the simple script, I created many others, such as setting up the voice etc.Nothing works..There is also a separate problem getting the voices, but I want to see if it works with the default voice first.
P.S. If I do XCode programming, using swift to develop native code on iPad (not in Safari), speech works on the iPad. But my goal is to create a web page using the Speech API
Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script>
function Speak() {
speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is my voice on a webpage"));
var speech = new SpeechSynthesisUtterance();
speech.text = "Hello";
speech.volume = 1; // 0 to 1
speech.rate = 1; // 0.1 to 9
speech.pitch = 1; // 0 to 2, 1=normal
speech.lang = "en-US";
speechSynthesis.speak(speech);
}
</script>
<a onclick="Speak()">ClickMe</a>
</body>
</html>
Check your volume, mute switch and make sure you don't have bluetooth headphones set up. It must also be within a click event (which you are doing). Try a normal video to make sure you get sound.
What made it work for me?
I went downstairs
I watched a video in Safari
I tried again and it worked
I then tried again and it worked
I tried again and it didn't work
I played a video again
It still didn't work
I force quit EVERYTHING
It then worked
And then it didn't
Then I realized I hadn't closed browser tabs
Then it worked
I think there's a bug (iOS11)
I have a mobile-optimized website with the necessary code to it available as a webapp. This site includes links to place calls and send emails. This has worked for years on iOS. However, it no longer works on iOS 7. Here's a stripped down version of the code. I verified that after "adding to homescreen", opening the webapp, and tapping the phone number, it works in iOS 6 but not iOS 7.
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
(212) 555-5555
</body>
</html>
Is this a bug in iOS 7? Or do I need to add something new for it to work in iOS 7?
When I look at the RFC's (# 2806, which defines the "tel:" URL scheme), I never see parenthesis characters in the example URL's.
And in the "Phone Links" example in Apple's URL Scheme Reference, Apple shows how they use HTML that looks like: "1-408-555-5555".
My guess is that - as of iOS 7 - Apple has tightened up a bit on how "tel:" URL's can be defined (e.g. parenths might require escaping or proper encoding).
So try getting rid of the parenths and see if you have better luck.
IOS7 can not link from webapps, you can't open URL's, App Store, Youtube either.
So it's not a "tel:" issue :-)
But they do work if you remove:
And make it just a home screen bookmark, not a webapp.
Mac
I am a beginner to jQuery Mobile and am developing a mobile website within Dreamweaver CS5.5. Once I received the new DW I immediately updated to jqm 1.0a4.1. Designed my site and it looks good on desktop Safari and mobile Safari. Then I updated to jqm 1.0rc1 and while the site looks same on desktop safari, the entire website design decreased to an unreadable size in mobile safari. I tried again with 1.0rc2 and same thing happened as with 1.0rc1. When I return to 1.0a4.1 the site looks great on desktop and mobile.
Does anyone know why this would happen: is there something I'm missing and can correct to have the latest version of jqm work on both desktop and mobile safari?
Thanks for your time, I appreciate it.
jQuery Mobile 1.0a4.1 dynamically injects a viewport tag into the DOM. In newer versions you need to do this yourself. Try adding this viewport tag to the <head> of your documents:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >