Flutter web seems to render the elements on the screen way too large. Everything, from text, to Containers, to form fields, is massive. It is like everything has been zoomed in. It doesn't look good. I thought setting the visual density of the theme to VisualDensity.compact or VisualDensity.adaptivePlatformDensity would fix it, but it doesn't seem to. Running the app on a very large iPad Pro does not enlarge the elements. Why might this enlargement happen? I work on another Flutter app that is not enlarged on web and am unsure of what the key difference is that is causing the different rendering behaviour.
This ended up being due to setting my mac display to "Scaled" with "larger text" in system preferences. It seemed to affect the web version and not the mobile simulators; I guess because the simulators are not under the mac display settings; they are their own device.
The fix was to set it to "Default for display":
Related
Version 65.0.3325.146 (Official Build) (64-bit)
Going into responsive mode seems to keep desktop view and crop the screen.
All of the preset phone dimensions don't work, but a custom one seems to fix it.
Is this a bug or is there a resolution?
Video of issue: https://streamable.com/oe5in
Same here. Setting the size manually worked (like, creating a new device with the same size as another prebuilt one), but its not really optimal. I wonder if this has something to do with device pixel density.
But it should not happen at responsive mode. :(
Looks like it's an official bug, issue has been reported to Google here: https://bugs.chromium.org/p/chromium/issues/detail?id=819489#c47
Im using chrome developer tools to check out different device views (iPhone, iPad etc). I don't change the code, go on iPhone view etc and it all looks good. Then without changing the code, I check out the norebootview and go back to lets say iPhone or iPad view and everything looks very different. For example the margins are totally mixed up. Then when I refresh the page or go back to normal view back and forth, it looks normal again and sometimes it doesn't. I don't understand when that randomness comes from. I am using less/sass for the css.
Any suggestion would be really helpful!! Thanks!
AN Ionic application am a working on is having some odd behavior when run in the iOS simulator (Xcode 7.2.1). My login screen when normally run looks like:
When editing the username field however, I see some sort of toolbar popup at the bottom:
Worse then that however is when I go over to the password field:
I thought at first that this may deal with the native WebView, but it only happens in the simulator. Not when run on the actual device or through ionic serve. Any ideas what is going on here? Why this odd behavior?
EDIT
Also, the app launches with the default Cordova splash screen even though I have set a splash with Ionic. Even so, it should be showing the Ionic splash as opposed to the Cordova one.
EDIT #2
Many times, the Cordova status bar fails to work and my status bar is black as opposed to white.
While this looks weird for you in iOS Simulator, and for me in Chrome's device emulator devtool, it's 'desired behaviour' in Ionic.
Ionic is designed with mobile focus in mind, so when emulating a mobile device, they hide elements to simulate the native keyboard.
Ionic wrote a blog post about this, in fact:
Getting the keyboard to play nicely with the web layer was challenging for several reasons. Probably the biggest issue is the variation in behavior across devices and platforms when the keyboard is shown.
In iOS, not only does the web view resize differently when the keyboard shows in versions 6.1, 7.0, and 7.1, but it is affected differently, and sometimes completely oppositely, by including or excluding the viewport meta tag. Throw support for tablets and landscape orientation into the mix and trying to make every scenario on every device work nicely can have you quickly creating three new issues for every one you fix.
The blog post goes on to say they wrote a Keyboard plugin for Cordova, which is supposed to perform keyboard related hiding and element changing as faster and more accurately. You can find that GitHub repo here.
Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
My question is, can we make the gui of GWT app automatically enlarges itself so that mobile users do not need to enlarge it?
Also the gwt could shpw the gui in Portrait direction.
you need to follow responsive web design principles to achieve your objective. Also have a look here bootstrap provides widgets that are flexible
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.