I have a WordPress site, allthingsbahai.net, running WordPress version 4.7.9, that is no longer displaying correctly on iPhones and iPads. When the site first loads, the logo displays correctly. On subsequent pages, including the home page, the logo is overly large and distorted. What is strange is that the logo displays correctly on Android phones, and also on the computer regardless of how small the browser window becomes, so it seems to be specific to iPhones and iPads.
We have tried using different images for the logo, but they all act the same. This problem has only developed in the last month or so. Before that, it was working fine.
I have a companion site, bahaistudiesinthecovenant.com, running WordPress version 4.7.9, using the exact same logo image, which displays correctly on all devices.
Does anyone have any ideas?
Related
I don't know if this is specific to the newest update of IOS 13, but I'm having some really strange PWA behavior. When I initially add it to my homescreen, links on the page open in safari rather than inline on the PWA (none of the links are set to __blank by the way), but when I sign in with oAuth on safari and then add it to my homescreen, it functions like it should and it works normally with links. (Currently using Passport with Node and Express for authentication) I don't know if there's some security infrastructure or something to do with packets, but it's really strange and I'd like to resolve this as soon as I can before my userbase gets frustrated.
I've tried looking through my manifest but everything is up to spec as far as PWA standards go. I have the display set to standalone, I have all my tags setup correctly, Lighthouse audit also says it should work. I've looked through the passport docs, traced my authentication code, but nothing seems to work.
It looks like Apple changed the home screen/standalone web app behavior in iOS 13, but I cannot find any official documentation on this. Now it seems that if you did not have a manifest.json setup before the web app was added to the home screen, it only treats the initial page as being in scope for the standalone view. Hence any other link/redirect opens in another window or the in-app browser.
We have a web app installed on our user's home screens that was written years ago and functioned just fine up until iOS 13 without a manifest.json file. I had to rewrite the WebSQL code in our app to use IndexedDB instead since they completely dropped WebSQL from home screen web apps in iOS 13, even with WebSQL re-enabled in the Safari advanced setting. When I started testing on an iPhone, any link or redirect, even using window.location.assign or any number of other methods would always open the next page in an in-app browser with a minimal UI. This also messed with the page geometry as what was a full height page with no scrolling, was now scrollable with our 'Next' button elements pushed off the bottom of the screen. Since we have some scrollable panels in the middle of some pages it wasn't obvious how to get to the end of the page (you have to scroll a fixed element to scroll the whole page) so that was not going to work for our users.
Long story short, adding a bare minimum manifest.json file to the web app (doesn't even need the scope setting) and deleting and re-adding the web app to the home screen then makes it behave as before with all pages showing in the standalone view. Adding a manifest.json to an already installed home screen app does not affect the behavior.
I am building a website for a friend and it's just about done, apart from a bit more content, but now he tells me that it doesn't look right on his iphone. I have checked it on Safari, Opera, IE, Chrome and Firefox on laptop, and on my Android phone and on web-based iphone emulators and everything looks fine. I had him check on someone else's iphone and 1 of the problems goes but the other remains. My site is pretty basic, html and css only, but I am the first to admit that as I am new to this my code could probably be better.
The first issue is that above the header his iphone shows there are what's best described as 5 red bricks evenly spaced along the top. This doesn't show on his mates iphone.
The second issue is that on the "products" page, the right column text under the pictures isn't lined up properly, which is the case on his mates iphone. I don't know what to do here because if I alter the padding I used to line things up, it won't be right on every other browser/device.
I'm not sure what I'm best posting on here, the whole code for the site seems too much, but whatever needed to help answer just let me know. The site address for the products page is http://www.doortodoordrinksyork.com/products.html
Like I say I'm new to this so please keep answers simple.
Thanks in advance.
David.
PS Would appreciate anyone with an iphone telling me how the site displays on it.
If you use a Mac, you can use the iOS Simulator tool that comes with XCode to test out your site in a virtual iPhone/iPod. You can even compare different versions of the built-in browser, which I think is what's causing the difference between your mate's devices.
In general, well-built sites will 'work' without modification on mobile devices, but you may want to look into media queries, a CSS feature that lets you target specific screen sizes with different rules.
There's a web page at http://examinemysite.com/foodRating. The webpage shows properly in two iPhone emulators as shown below. However testing using a real iPhone and a real WP7 phone, the size of the text and the stars are a lot smaller. Why are the physical devices not showing the same page like the emulators (same size text, stars and spacing)? The emulators are running under Windows 7.
IBBDEMO:
MITE:
You're using tools that simply try to display what they think would be displayed by MobileSafari. IBBDEMO is, if I'm not mistaken, an Adobe Air application. I'm not sure about MITE, but I don't think it has any special knowledge of MobileSafari either. These tools seem like nothing more than web browsers that display in a small 320x480 window with an iPhone image wrapped around the display area. It would be fairly astonishing if they did a perfect job of simulating MobileSafari.
I have a fairly standard ASP.Net web application which is used via mobile safari on the iPhone.
Some users who have a link to the web application placed on their desktop via profile are reporting that when navigating between pages (which I do on the server with Response.Redirect after specific events or via standard anchor tags in other cases (no target specified)) that Safari opens a new window instead of reusing the existing window.
Because of this, any login token/cookie etc (i'm using the built-in ASP.Net membership stuff), is now gone for that new browser window and the login prompt is shown.
The problem doesn't happen every time, and I can't seem to replicate it on my device (but i'm not deploying the shortcut via profile)
As you can probably imagine, it's quite frustrating for the users to have to log in every time, and you can't fix an issue you can't replicate.
My question is, has anyone heard of this issue and/or know a workaround?
The app is NOT iPhone specific, that is, it is used in a full desktop browser as well, and the logins stay like you'd expect there - and the same window is reused repeatedly.
I've considered a few possibilities, but have been drawing a blank as far as what might be causing this or how I can resolve it.
Do you have any iPhone meta tags set (to remove the url bar or the toolbar, for instance?) If you do, the phone will assume it's a native web app, and urls will open in a new safari window, like they would for any other native app.
If you are taking advantage of using the web app in full screen mode (where it is bookmarked to the launch screen next to native apps) you can prevent it from jumping out of fullscreen mode by and in to safari replacing type links with javascript.
location.href = '/yourPath';
This is a nifty trick which even works if you are linking to an outside URL, like doing an OAuth to Facebook and back.
I have a blog post on this here: http://www.aaroncoleman.net/post/2011/07/29/Keeping-iPhone-Web-App-in-Fullscreen-mode-from-Homescreen-Launcher.aspx
I'm using Apple iPhone Configuration Utility to configure in-company mobile phones. I'd like to add to home screen an icon for a in-house web application we have developed. Using the Web Clip section, it's easy to add the webclip to home screen, however, we have two issues:
The webclip doesn't show up the png icon defined for the page (in meta tags).
The page loads up in Safari but is not "stand-alone" (fullscreen) (same thing, this property is defined in meta tags).
Note these issues are not encountered when adding the webclip to the home screen directly from Safari Mobile on the device.
Best
Use the iPhone Configuration Utility. There, in the section for web clip you can set full screen and and the icon. As far as I remember, you need to have those things set there and in the meta tags.
We use this feature quiet a lot and it works very well.