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":
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
With some bootstrap 3.2 integration I have been making a horizontal scrolling site with 100% height and width divs to represent "pages".
It has been functioning correctly on various devices throughout development but when I went to use it in mobile-safari after ios 8 update the site is now displaying incorrectly...FFS
For the time being you can see the development site here:
(site is no longer active)
I'm pretty much convinced it is related to the audio/music player section. It's an old music player that has been restyled for the new site. The plan is for the site to go live with this player and then we'll be working on updating it after that.
To see how the site 'should' look you can view it in chrome on iphone (or on android of course).
It works fine in resized desktop browsers - it is literally just the ios 8 mobile-safari update that seems to have a bug.
For all I know they may update and it will fix itself, but I can't really just rely on that.
The navigation should be 100% of the viewport not 100% of the entire document.
There should be an audio player fixed at the bottom of the viewport.
I've tried a few things like stacking the divs vertically and while that helped with the navigation width issue it caused the audio player element then became contained within the parent 'music' container - I set the music container to overflow:scroll and -webkit-overflow-scrolling:touch as with the other sections but the audio player controls stopped being fixed...? It also stopped it working in chrome for ios which means it really isn't a viable option.
(Please excuse the messy css if you do take a look. The feel of the music section was revised partway through and I'm waiting until the end of development to clean it up.)
As far as I can tell this is not something that has been asked yet - I've searched for a few hours but I think the case is probably quite unique (horizontal full page layouts with bespoke audio players are pretty uncommon as far as I know)
Any help will be much appreciated
The question is simple I've tried several different techniques like re-ordering scripts being called in the DOM, removed 100% height from the body and html element in my css; but none of it worked.
My site won't scroll down the page on iPhone or iPad and I can't seem to figure out why. It will scroll a few hundred pixels down the page and then freezes.
I've run an audit in chrome and tightened up as much as I could but, i've checked the timeline but don't see any resources hogging the bandwidth that might cause the page to just freeze like this.
Here is the public facing link (sandbox) I have going on.
https://cloud.spinsys.com/sky/marketing-v3/index.html
Obviously to reproduce the error you'll have to view on an iPad or iPhone or any tablet that you might try it on to see if it works on those.
Has anyone encountered an issue with their site not scrolling on an iPad or iPhone?
It is a responsive site and it's of major importance that I get this fixed.
Any advice, help, suggestions would be most helpful, thanks to the S.O. community upfront.
The problem was the skrollr.js library. I have removed it and the page scrolls fine on iPad and iPhone.
Is there a way to revert the look & feel of iOS Simulator window back to how it used to look in 5.0 and older versions?
P.S. I know Cmd-Shift-H shortcut for Home Button.
For anyone who comes here with this problem, but does not read the comments, you can get it back by hitting CMD-1 (as noted above), but it will only show for the full size emulation, if you want it zoomed out, it goes away.
then you have to use the shift-cmd-H to click the home button. And you can do it twice to simulate the click-click to show running apps, and then close them. (Don't press and hold tho, that will just trigger it to keep opening/closing the running apps window)
If you have a Retina Display macbook, you must set set the display to the highest resolution to see the iPad/iPad Retina frame on the simulator.
Hope this helps someone out!
You have to Choose Hardware > iPhone, and THEN hit Command + 1...I'm surprised nowhere else was this posted in this order. Happy Coding!
I had the same issue with a previous SDK and I had to reinstall the SDK in order to have the frame back again (I needed it for some screen shots).
So I am almost sure that it is not related to the retina resolution.
Unfortunately it is not possible to bring back device frame around display - I believe it's because of necessity to save up display space when simulating iPad's retina display. Maybe some day, when MBP, MBA and other Apple's machines will have retina displays, device frame will be back ;)
Note: if someone proves me wrong and we can have device frame, I'll of course mark his/her answer as correct one :)
This page explain it all:
http://iphonedev.tv/blog/2014/2/25/xcode-fix-show-the-iphone-simulator-skin-on-a-retina-display
Option 1: Turn Off Scaling
If you scale the size of the iPhone simulator to 50% or 75% the skin will not display.
Option 2: Get a Retina Display
No retina display, no iphone frame
Just hitting CMD-1 didn't work for me, nothing happened.
However, after switching repeatedly between CMD-1, CMD-2 and CMD-3 in a quick manner, all of a sudden I got the frame back! Hope it helps others!