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.
Related
I've run many tests for mobile including using Google Chrome and Safari's Responsive Design mode with the iPhone 6 setting, however, a link with an icon is showing up differently on my actual iPhone 6.. does anyone know how I can get the same result on my browser so I can tweak the CSS so the icon doesn't go underneath? Thanks
This is what shows up on the tests in the browsers
This is what shows up on the actual iPhone 6..
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"
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!
I noticed the Home Full Screen Apps behaves worser than Mobile Safari. I'm wondering also if there are any differences in UIWebView from Mobile Safari also. I'm currently testing on iOS6. If anyone has anything else they want to mention about the pros and cons of each I would appreciate it.
So I've been developing a mobile website for a client and I've run into some weird graphical glitches when using the back button on iOS devices.
This is happening sporadically after having navigated through the site and then used the back button on the browser to go back to the previous page. As you can see in the image it leaves a bit of the page the user clicked the back button from just below the fold on the page when it finishes reloading.
here's a screen capture when this has happened.
http://i.stack.imgur.com/esObx.png
Does anybody have any idea how I can prevent this from happening?
I'm not sure why this was happening. It appears to have only affected mobile safari on iOS4 devices. iOS3 devices and iOS5 devices appear to be immune.
My solution was to hide all the elements on the effected page and use setTimeout to wait a few microseconds before showing them to force a screen redraw.