Google fonts don't load on RELOAD in mobile - mobile

We're using Google Fonts on our site. When I delete history, cookies, and data from my mobile browser (Safari on iPhone), the Google Fonts load fine. However, if I reload the page, the Google Fonts don't appear. Instead I get the back-up serif font. This would be fine, except that the back-up is too small and illegible.
It's important to know that this is only a problem on mobile. The site reloads fine on desktop.

Related

React app not loading in IOS Facebook in-app browser

I have a full stack web application. The backend is built in Django and the front end is built in React. Everything works fine.
But the only problem is when I send that website's link to someone on Facebook/Messenger and when they click on that link, it opens in the Facebook in-app browser but it shows blank page.
But If I copy that same link and paste in Safari or any other browser, it loads without any issue.
What might be the issue? Why doesn't it work on IOS Facebook in-app browser?

Images not displayed using localhost, after pushing code to github

Live Site
Repo
I just uploaded this project and the live site works fine. But for some reason the images are now gone when viewing it on localhost. It worked fine until I pushed and published the project.
The images folder is inside the public folder.
Also I just realized that when viewing the site on mobile, I seem to be able to scroll beyond the content (right and down). I’m not sure why that is..I also noticed that when viewing the site in the browser and enable touch simulation. Disabling it, it doesn't scroll beyond the content.
you have specified the file location as "./images/client-databiz.svg" for images
which is need to open the folder named images under the current JS file presents.
since during deploying it will build and make your code into static file
refer
you need to use "../../public/images/client-databiz.svg" to preview that actually.
I hope it will also work in production.

Why is my website's mobile version not working properly?

I have created a webpage using Dreamweaver and the mobile view is not showing properly on my website after uploading using Cpanel. This webpage is a practice site that my boss asked me to work on.
I have set the mobile view to trigger from 0 to 720px width. When I do live preview on my smartphone using the live preview of Dreamweaver all looks ok but when I upload the files on Cpanel and visit the actual site from my phone the mobile view does not trigger at all.
enter image description here
Here is how it looks in the actual website: http://www.simplifiednaturals.com/VivaslimSNC1/
Please help. I am very new to website development and only know basic stuff.

Force stripe checkout modal on mobile?

I'm building a web app with Stripe checkout. On desktop it loads a nice modal when you go to pay, but on mobile it brings the users off to a Stripe page, and then back. I want it to look like the user is never leaving our site.
Is there a way to force the modal to be loaded on mobile? I'm building the web app in ionic at the same time, so if I want to turn it in to an app I can. Ionic uses a WebView on the phone and that loads the modal fine, so there must be some setting that is allowing it?
Anyone have any ideas? Thanks.
edit If I 'request desktop site' on my mobile it loads the modal fine
As Stripe makes these determinations based on the User-Agent you could try changing the User-Agent of your webview to match that of a desktop browser, (I did a similar thing except I needed to force mobile behavior in the desktop).
It should be stated, that this is definitely not recommended by Stripe nor supported and could break at any time. They'd recommend you just build a custom form using Stripe.js
How i can set User Agent in Cordova App has how to set the User-Agent in iOS and Android.

FB.init (of Facebook web app) doesn't seem to get called when running on mobile

I have a Facebook web app that runs on canvas. The canvas URL is configured as http://apps.facebook.com/myApp (example). This URL has an FB.init that helps me identify and login the user by getting his name and FB user id. This app runs fine on a PC or a laptop.
This page is very simple with some JavaScript but with routine HTML tags like <p>, <input>.
I configured the same URL as Mobile Site URL under Mobile Web. Since then I can now see the link for this app on my mobile device (an Android phone). But when I click on the link, the first page of the app opens in my mobile browser but it seems that FB.init can't run there. I can't get the user id and use name.
What is the reason and what is the solution, i.e., how to make the same app run on users' mobile phones?
Thanks.

Resources