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.
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..
So about a year ago I implemented the smart banner for a ios app on a mobile website.
It worked fine until I saw earlier today that it is empty.
I looked at the id in the meta tag. But it is correct.
Screenshot:
<meta name="apple-itunes-app" content="app-id=[ID]">
Can't find it myself, so help would be appreciated
iOS 9+
iPhone 5+
iOS emulator on mac mini
all the same effect (see screenshot)
Thanks !
I got this working by only using the numeric part of the App Store id:
<meta name="apple-itunes-app" content="app-id=698632628">
As stated in the documentation:
Banners won’t appear in the iOS Simulator.
Your tag looks fine.
If you test it on an actual device the banner should display properly.
The reason for this is probably that the banner has to pull the information from the app store (including whether the app is installed on the device), which is not present on the simulator.
If the banner does not properly display on an actual device the reason could be that the associated service of apple is currently not available as mentioned in the following post: Smart App Banner showing as blank, gray bar
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"
I have two iPads that I'm developing on. One is an iPad air, the other is an iPad Retina 4th Gen. When I upgraded to iOS 8.1 on both, my web app was showing the status bar at the bottom. So I added the following code from iOS 8: web app status bar position and resizing problems:
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
This fixed the problem on my iPad Air. But the retina device was showing a black status bar. So, I tried this:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
This fixed the issue on the retina device, but now my iPad air is showing a narrow black bar at the bottom of the screen (see images).
Why is there a difference between these devices, both on iOS 8? How do I find a solution for both? Do I detect the device model and add corresponding lines using if else? Is there a more elegant way?
Users are using iPad 4 right now, but could upgrade any time, causing a mix of Airs and 4s. So I need a solution that works on both. Also, this is a web app built on JavaScript and AngularJS + HTML5.
You need to remove and re-add your webapp to your home screen after setting the status bar to "black-translucent"
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.