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
Related
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
I am making a website with flutter
codingfries.com
Can someone check what the hell is happening when I click on Desktop View on chrome browser in mobile phone. The website starts to behave weirdly.
This is supposed to happen as the layout changes. Width of screen changes when you emulate Desktop view on mobile phone. For handling such cases, flutter has media queries which can be used to change layouts based on screen size changes.
For more info refer the official documentation.
https://flutter.dev/docs/development/ui/layout/adaptive-responsive
I've found the fantastic Chrome Toggle Device for mobile testing in Chrome.
Is it possible to find out the url that Chrome uses for online testing within the Toggle Device Mobile emulator screen?
I wish to use the Mobile Emulator within a iframe for a specific url.
Chrome Mobile Example Image
Thanks!
The URL is the same one that is in your omnibar's address area. All Device Mode is doing is hitting that URL but modifying the headers sent to the server to look like the specified device type. And then making the local viewport look like the given device's size.
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'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.