What is causing my web app to look zoomed in? - reactjs

Scenario: I have a web app and when I am developing I am using Ubuntu Linux and viewing my web app in Firefox. The web app looks great. It is styled using tailwind-css all pages are set to the same max-w-6xl. When I dual boot back into windows(to watch movies), it I go to my web app(same device, same browser) it appears to be zoomed in, the navbar stretches all the way across the screen.
I would submit screenshots, but I don't won't the post to get removed for promoting!

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?

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.

Rendering mobile simulated view inside image of mobile phone on desktop browser

I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.

Azure Mobile App and AngularJS responsive in same host space

Is it possible to get ride of "This mobile app is up and running" page and when user enters the sitename redirect/route him to sitename/app folder where I can pretty much create a AngularJS website in my project folder. FYI - I'm a Dev beginner
using Custom site URL in Azure: I tried this and working pretty like,
when I open the site (www.testsite.com) it's taking me to blue screen
when I go to (www.testsite.com/app) it displays my AngularJS app that I am trying deploy along with and in same mobile app serivce
REST API services and details under www.testsite.com/swagger
why I am trying this ?
On a typical note I want my app to serve all devices, web, mobile, tablet and I feel that mobile app solution is the only lean solution to do rapid application development but wondering how to reach web users without creating an other Web App services in Azure only for Views or web client which comes with cost. let us say if mobile service is just a backend stack and it doesn't allow it... I wonder why not ? by doing it, developers don't need to create 2 services in azure (1. mobile app, 2. web app)
Appreciate it.
found work around by adding MVC Razor Home controller and view for home landing page. more information in this link. this may be a temp solution to get ride of Blue screen and I am going to explore more in include AngularJS site and routing from angular too.
Since this solution works with only MVC style routing there will be a conflict between routing mechanics. will update as soon as I get something.
https://social.msdn.microsoft.com/Forums/azure/en-US/f23175db-2a83-489f-ac0c-f2abe9e48a76/default-document-for-the-mobile-app?forum=azuremobile
If Home view not showing up refer this link.
The view 'Index' or its master was not found

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