I am having a problem when trying to navigate through a deployed Flutter web app in Safari and Mobile Devices.
I have like 4 different screens in the app, 3 of them works fine, but when I redirect user to the principal screen, it just shows a blank white screen. This happens only in Safari and in Mobile Devices browsers (Chrome/Safari). When using Chrome and a desktop it works as it should (all screens shows normally).
When debugging with Chrome it works perfectly too.
[EDIT]
Print console error with Safari
I tried the following:
Changing build type (--web renderer canvaskit / html --release)
Changing channel from master to beta
Updating Flutter and outdated packages
Cleaning build a hundred times
Debug with Safari but I don't think it's possible
Related
Hi I made a simple web with Flutter and I made it responsive, so I checked with chrome dev tools if all works properly and it does.
Like this picture, that is from Chrome dev tools
The thing is that when I deployed with firebase hosting, I tested it on an Iphone 8 plus with safari and the menu is not showing well, and I don't have any idea of why
As you can see the menu is cutted. Also if you know how to remove the annoying bottom white bar that is created only on mobile web I will appreciate it.
The app works perfectly and smoothly from pc browsers, and it is a bit laggy from mobile browsers,
but it is unusable from from mobile browser on (desktop mode) on phones with big screen resolutions.. it doesn't respond to clicks correctly.
my mobile's screen resolution:
Image
I thought it is a responsivity issue but I fixed that and the problem wasn't solved.
this is the link of my app: https://tree-plan-viewer.web.app/
the app from chrome on desktop and mobile are different. the correct one is the one from desktop. the app on the mobile device (in this case iOS) has the images cut out from the screen or completely moved, plus there is a sort of zoom. If from Safari on mobile I select "Request Desktop Website" the site is displayed entirely and correctly. how can i force this default setting in flutter 2.0 web?
Probably will need to feed in the platform density property to your material app https://api.flutter.dev/flutter/material/VisualDensity/adaptivePlatformDensity.html
I am using ionic framework to create a hybrid app. The app is working fine in all devices (android,ios and windows), and also url is working fine in android,ios browsers but the problem is with windows mobile IE browser.
Problem:
Click functionality is working only when we double tap. But in desktop IE it is working on single tap only .
I have an Ionic app which I currently serve as a web app by doing ionic serve
I have few questions about it:
By default in the served web app, it takes the iOS layout, can it be changed to the android layout instead? How?
In the android version of y ionic app when I do ionic serve --lab, some of the bottom part of the content is somehow cut off (I can not scroll till the end), however it looks perfect in iOS version. Why does this happen and how can I fix it?
When I try to make an APK out of it as mentioned in the following link http://ionicframework.com/docs/guide/publishing.html , I get a blank app on my android device. What could be the reason?
ionic serve --platform android
Are you taking in account that iOS scroll "stretches"? I mean, even when the scroll is all way down, you still can pull the content up. Maybe your content is indeed hidden (specially if you are using a footer bar. Actually, if you are using a footer bar, try to add a margin-bottom for your content equal your footer bar height.).
Have you checked if this happens when you run ionic run android? If this command works, try to run cordova prepare android before following the publishing procedure. If the command does not work, open chrome://inspect on your computer's chrome browser (with the device connected to your computer and running your app) and debug it to check if your code is being packed with the apk and/or the app is yielding some error messages.