My Chrome Packaged App has 3 icon sizes for the moment: 16x16, 48x48 and 128x128. But I haven't find any information about a 256x256 icon for retina displays like Chromebook Pixel or rMBP.
I haven't these computers so I cannot test, did someone know if Chrome use a big icon format when you launch a Chrome Packaged App on a high-resolution display?
Thanks for your help.
If you put a 256x256 icon in your manifest, Chrome will make use of it wherever necessary. When Chrome creates icons for the app in the operating system's menu, it will store the full resolution icon, so it will be up to the operating system to decide when to use them.
To the best of my knowledge:
On Windows, you will hardly ever see it, but if you create a Desktop icon, then set the Desktop to show "Extra Large" icons, you will see it. (I don't know why anyone would ever do that.)
On Mac, the dock can be set to show a large icon when the user mouses over, and on a retina display it probably uses the 256x256 icon (but I haven't tested this).
On a Chromebook, I don't think the icons are ever shown big enough that the 256x256 icon would be useful, even on a high-res display. However, this may change in the future, so it is always good to supply an icon in as high resolution as possible.
So in summary, it is worthwhile making a 256x256 icon if it's not too much trouble, because it will be used in some situations. But an ordinary user will probably not see it very often.
Related
I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
I have a user who is using my web app on a Surface Pro 4. The app doesn't render very well. The best way I can describe it is that it appears the browser window has been resized to a small size and it's trying to bunch stuff up. However, I believe he has his browser maximized.
Since I don't have a Surface, I've been trying to get both Chrome and Edge to emulate the rendering issues. Here's what I've tried:
Edge: Has a preset for the Surface Pro 4. I figured that once I selected this mode I would see the problem. It's actually the opposite situation. I actually have to expand the browser window to multiple displays to be able to see all the content (even the browser scrollbars). I suspect that's due to the Surface having a higher resolution than my PC.
Chrome: No preset for the Surface and I couldn't find anyone who had the specific settings. I tried 2738 x 1834 and all three of the built-in pixel ratios (1.0, 2.0, 3.0). Chrome zoomed out so that it all fit on my screen. It also had no rendering issues. Changing pixel ratio made no difference.
I'll admit that web UI development is not my strong suit. And it doesn't help that I inherited a lot of this code. But I'm really scratching my head here.
If I try to emulate with a phone preset, then I can see rendering issues because the app isn't phone friendly, nor does it really need to be. That seems to suggest the emulation in the browser is working fine. What's left? The only thing I can think is that he must be using some kind of scaling that's messing things up.
Also, I should note that I had a friend with an iPad (Sorry don't know what model) try the app out as well and he also sees the same bad rendering issues. In fact, he thinks it's rendering worse than the Surface.
Edit 1:
I put together a test page that shows the header from our app. It is here: https://app.astrolabe-analytics.com/surfaceTest
Here are screenshots of the various displays being tested:
Here is Surface Pro 4 Hardware - Notice buttons are wrapping
Next one is iPad Hardware (I don't believe it's the pro version)
Then here is the way I have Chrome set up to emulate the Surface Pro
Surface Pro 4 emulation in Edge. Note that I had to extend the browser window onto my second monitor to take the screenshot.
Finally, the standard appearance in Chrome
It seems that the emulation works well on my side. please check the following screen shots:
Edge emulation for iPad,
Edge emulation for Surface Pro 4,
Chrome emulation for iPad:
Chrome emulation for Surface Pro 4:
Besides, I also found that if we resize the browser window (change the width property), if the width is too small, the text will wrap or disappear. Please check this image:
So, I suppose the issue is related to the CSS style, as a workaround, you could try to set fixed width property (or using the min-width property) for the navbar-nav class, also, you could refer to the following links to use Bootstrap navbar styles:
Bootstrap Navbar
Angular Bootstrap navbar
Is there a way to make the font sharper in PhpStorm?
Solutions online suggest going to "Compatibility" and choosing "Disable DPI scaling on high DPI settings". I don't see that option in my version (2019.3)
It's not a huge difference but it's definitely noticeable after a while. I changed font to Menlo (same as in Sublime, but it didn't help)
Attaching a screenshot of how PhpsSorm shows text (on the left) vs Sublime Text editor (on the right):
As per support should use "greyscale" instead "subpixel" (see the screenshot below). This fixed the issue for me. Super sharp now.
I'm normally develop on hi-dpi machines (a Macbook Pro, 2018 MBA, iPhone, Pixel 2 XL). Often I'm styling something or drawing a diagram and I need to know how it's going to look when displayed on a low-dpi machine (pre 2018 Macbook Air, majority of PCs, etc...)
I tried using Chrome's devtools device emulation and it let's you set a devicePixelRatio but it's still actually rendering text and SVGs and styles in hd-dpi. (Not really sure what that setting is doing. I made to custom settings, one 1280x780 dpi = 2, and another 1280x780 dpi = 1 and switching between them changes nothing. My guess is it only changes what "windows.devicePixelRatio" and maybe what images load if using srcset and css media queries.
Is there a way to simulate low-dpi in Firefox or Chrome? Basically to get the browser to render at 1/2 the resolution and then expand with nearest neighbor filtering. I realize it will not be a perfect representation but my hope is it's good enough to check that thin lines in a diagram for example are still readable.
Well I figured out one way, at least on Mac.
Turn on OS Zoom in Settings under Accessibility
Be sure to uncheck "Smooth images". Then in Chrome or Firefox set the zoom level to 50% and turn on the OS level zoom Option+⌘+8
This does a pretty good job of looking like a low-dpi display.
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices