Device Toolbar - Responsive View - google-chrome-devtools

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

Related

Flutter web renders elements on the screen too large

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":

Why does the iPhone Simulator show parts of the springboard behind the app?

While revising one of my apps to work with the latest iPhone dimensions I noticed the simulator was (wrongly) displaying icons behind the app like the app wasn't sized correctly for the new 1136 x 640 dimensions. I couldn't find anywhere in my Cocos2d 2.0 code that affected this issue and changing the size of the white background image did nothing. When I told the simulator to go "Home" and then relaunched the app, it appeared normal. This only happened when testing localization languages like German in the following image.
Sounds like a bug to me. Maybe report this to Apple?
Yes this is definetly a bug, if not then apple will help
Reset your simulato.
then run your project.
Removing all references to armv6 eliminated this issue.

iOS Simulator v5.1 window is missing device frame and Home Button

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!

Safari: how to size the browser for the iPhone size (or some other solution)?

I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?
If you are looking for an environment to test, Ripple emulator seems a nice option.
I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).
The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.
You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.

Easy ways to crop out the status bar when taking iOS Screenshots?

Apple recommends cropping out the status bar from screenshots submitted to the app store. Doing this manually in Preview is a very tedious and error-prone process.
Do any developers have any best-practices recommendations or automated techniques for speeding up this process? The goal would be to take as input iPad and/or iPhone screenshots, and output them with the toolbar cropped off. We need to support both portrait and landscape orientation, and Retina-resolution iPhone screens.
I've found a few utilities online that purport to help with this, but the ones I have found seem to fail on Retina-display resolution screens. And another that works via the iOS Simulator requires a 1920x1080 resolution monitor to process iPad screenshots - making it useless for non-17" laptop-based developers.
Any other recommendations for taking good screenshots for the AppStore? I know (based on my searching) that there are a lot of other developers who would be interested in a quicker workflow to handle this.
Bonus points for being able to bulk-process an entire directory.
I developed a free App, Status Barred which is on the Mac App Store. It crops your iOS screenshots from iPhone, iPad, portrait, landscape, normal & retina display.
I used the ImageMagick command line tools to batch crop all the Screenshot png files, but haven't figured out how to not use auto assigned output filenames.
convert Screenshot*.png -crop 640x920+0+40 920Screenshot.png
Here are two ways, assuming you mean status bar and not toolbar (which you probably shouldn't crop out of the screenshots).
If you have photoshop, just change the canvas size by subtracting 20 (low-res) or 40 (retina) and anchoring the bottom of the image. This works perfectly.
It's also easy in iPhoto using the Edit/Crop feature. Set the dimensions to the correct size (Portrait: 320x460 or 640x920 and Landscape: 480x300 or 960x600) and move the crop screen to the bottom of the image. This does it perfectly as well.
After much searching, the easiest tool I have found is the iOS Simulator Cropper. It does a great job of handling different resolutions and orientations, and it is painless to use. No need to muck around with Photoshop or other slow / cumbersome tools.
Link: http://www.curioustimes.de/iphonesimulatorcropper/index.html
The developer reports that they have enhanced the iOS Simulator Cropper to bulk process screenshots taken on device as well as via the Simulator. I haven't tried this yet since the update, but if it works well this will be the perfect solution.
I have also found a very useful tool in the Mac App store called "Status Barred" that also very simply crops the status bar out of any images handed to it.
How about just using Preview? Command+A to select all, drag the selection down to 920px then Tools => Crop.