I'm trying to make an image go to full screen when clicked on for mobile using screenfull.js. However when I run the iOS simulator the line if (screenfull.enabled) is not passing.
Does anyone know how I can make this work for safari mobile? I'm trying to use it to make a pinch and zoom feature for images on my website.
I learned, iOS Safari does not support the native Fullscreen API http://caniuse.com/#search=fullscreen (which is what screefull.js uses underneath to implement it's API). You can try
<meta name="apple-mobile-web-app-capable" content="YES">
But only work with "Add to home screen"
Related
Currently i'm working with simple RN application, which just show web page in WebView component. On android devices it works pretty good, but on iOS, it looks like page is zoomed in, iOS status bar and fonts are bold
Screenshot from iPhone 6s React-Native application
https://pp.userapi.com/c638623/v638623954/6c05e/go4v1P7SKyY.jpg
Screenshot from iPhone 6s Safari
https://pp.userapi.com/c638623/v638623954/6c055/FPDDWCY8YqI.jpg
On Android devices page looks like page in Safari
I use WebView attributres:
ref, source, javaScriptEnabledAndroid, onMessage
And <meta name="viewport" content="width=device-width,initial-scale=1"> on web page
Why page in iOS react-native application may looks zoomed in
UPDATE:
Need to set attr scalesPageToFit = {false}, and all will be OK.
Closed.
Background: I'm using the custom pin share URL as you can see in the example below.
Problem: This share URL works on every single operating system and browser except Safari on iOS. It works in all other browsers on iOS, and it works in Safari on all other operating systems.
Example Link: https://pinterest.com/pin/create/button/?url=http://redefiningmom.com/the-real-reason-i-left-corporate-america/&media=http%3A%2F%2Fredefiningmom.com%2Fwp-content%2Fuploads%2F2016%2F01%2Freal-reason-i-left-corporate-america-pinterest.jpg&description=After+ten+years%2C+I+quit+my+job+in+Corporate+America.+Find+out+the+real+reason+I+left+Corporate+America+and+how+you+can+too.
Desired/Usual Behavior: This link would open a share dialogue leading to the creation of a rich pin with a large image, a description, and a link back to the webpage.
Undesired Behavior: Only on Safari on iOS this opens a share dialogue leading to the creation of a non-rich pin with a large image, a description and a link to the image, not the web page.
How do I fix this?
Using an iPhone 5S with iOS 9.2.1 (the latest), the pages look exactly the same on Chrome and Safari:
Just to clarify before I ask the question, I am not the developer of this app.
My company is building an iOS app and I have the app installed on an iPhone but there are issues that are happening in the WKWebView that aren't happening in Safari or any other browser so I want to be able to debug the HTML and CSS if possible without having to install XCode and run a simulation.
Is this possible? I've searched online and tried to find a solution to this, but couldn't find anything useful so my last clutch at straws will be to post here to find out if anyone has a solution to this.
I have found a way to do this so that it replicates the UI/WK WebView perfectly.
If you can, open the page that you're trying to view through your app in Safari and then click the button at the bottom of Safari that looks like an arrow pointing upwards inside a box. Click the Add to Homepage button and make sure that the site you're trying to debug has the below meta tags in the head:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
These will allow you to view a website in a full screen web app which is what the UI/WK WebKit does. All you now need to do is plug your iOS device into a Mac OSX computer and debug as if you would through Safari.
I hope this helps anyone else out!
You can do this if you use the simulator - the issues you're having should hopefully be specific to the WKWebView itself, rather than the the physical device..
Open Safari on you Mac, then make sure the Develop menu is enabled (Preferences->Advanced-Show Develop menu).
Then run the app in the simulator and navigate to the WKWebView in the app. Once it's on-screen you should be able to switch Safari and under the Develop menu you will see your machine name near the top. Under that there will "inspectable applications". You might see the of the document displayed in the web view, or you might see a menu item with blank text. Click this, then you get to debug your webview/js using the Safari developer tools.
You can even use the inspector to select elements in the simulator and highlight them in the DOM!
When running our web-app in full-screen mode on iOS 8.3, Safari crashes when changing the orientation of the phone a couple of times (2-5 times).
To get to the full-screen mode we used the Add to home screen feature of Safari, and started app by tapping on home screen icon of the web app.
The crashes only happen in full-screen mode - when the web-app is started by navigating to it's URL, Safari doesn't crash when changing the orientation.
This clearly seems to be a bug introduced by Apple on iOS 8.3. We can see that everything works fine on iOS 8.2.
The question is just if anybody knows a workaround or when this will be fixed?
We've now seen this already happening for all kinds different web app - would be a shame if Apple doesn't provide a fix for this issue soon.
Here is the code to reproduce. To make it crash, just run it from the home screen, turn the phone a couple of times and voilà...
<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta id="viewport" name="viewport" content="width=640, user-scalable=no">
</head>
<body>
content
</body>
</html>
Thanks.
PS: I'm aware that similar questions have already been asked (see links) but none of the answers provides a valid solution for us as we definitely can't get rid of the width=640, user-scalable=no viewport meta tag.
I'm developing a site for tablets (testing on iPad) using jquery mobile and I've enabled it to be a full screen web app using <meta name="apple-mobile-web-app-capable" content="yes" />
Works quite nicely, but when you navigate to a new page, there's a momentary flash which takes up 3/4 of the screen. There's no flash when browsing using it in standard mode safari.
The flash is very distracting and unusable.
The fullscreen "webapp" view that iOS uses gets less power to play with (ram,...) than the real mobile safari.
If you combine that with a lot of javascript going on in the background, you will get delays and page flickers.
I noticed jQuery mobile has a lot of performance issues in that fullscreen view, especially with the so called "fixed header and footer" on older iOS devices.
Try simplifying the javascript you use, and start adding functionalities from there.