What is the correct dimensions (width and height) for a Firefox plugin or addon icon in pixels ?
Is it the same size dimensions for chrome extensions?
32x32 in Firefox 3.6 or lower. Since Firefox 4.0 it can be up to 48x48 (see https://developer.mozilla.org/en/install_manifests#iconURL).
Related
In Chrome's DevTools, when I select a mobile device to display a web page, I notice that the screen size in DevTools does not match the device's actual screen resolution. For example, if I select a Pixel 2 XL, the width shown in DevTools is 412. But the device is actually 1440 in width. Is there a reason for this?
That's because the Pixel 2 XL has a pixel density of 3.5 so while the device resolution of the device is 1440 x 2880 px it's CSS resolution is 412 x 823 px ((1440 / 3.5) x (2880 / 3.5))
A pixel does not have an inherent size. It obtains one when it’s displayed or printed.
You can read more about the difference between device and CSS resolutions here.
You can find device and CSS resolutions for many devices here.
how does flutter calculate devicePixelRatio for each device?
for example:
pixel xl:
resolution: 1440*2560 px
device pixel ratio 3.5
screen size : 5.5 inch
on the other hand
Nexus 6:
resolution: 1440*2560 px
device pixel ratio 3.5
screen size : 6.0 inch
both devices have different screen size however both devices have the same devicePixelRatio ??
My guess is that the different displays have different pixel dimensions. So that you can have the same amount of pixels on different sized displays.
Current behavior
Grid is not visible as it does not respect the w/h = 100% set in the styles. I am able to see the grid instance after I manually change the h to calc(100%) in dev tools.
Expected behavior
Grid is visible, height of 100%
Minimal reproduction of the problem with instructions
Implement AG Grid and view on iPad ios 10.1.1
Please tell us about your environment:
IPad Air, os 10.1.1
ag-grid-angular version: 16.0.0
ag-grid version: 18.0.0
Angular version: 5.x.x
Browser:
Mobile Chrome 55 | iOS 10 Safari
This happened to me - the grid worked okay on Windows Chrome and Firefox, but didn't appear on iOS Safari or Chrome.
The problem was there was a div in the hierarchy without a height 100% - I was using flexbox for part of the view.
The solution was to just make sure all the divs containing the ag-grid have height: 100%.
I'm making a Cordova app and I've recently started experimenting with testing it in Chrome dev tools. I'm emulating touch events, and that's working fine. But when emulating the device screen resolution, things started to get weird. I'm working with an iPhone 5 screen right now, and the device size I use for that is 320x568. In Chrome dev tools, I set the device resolution to 320x568. When running the app in Chrome, everything is twice as small as it should be. So I ran width and height operations on the window, document, and screen objects.
$(window).width() returned 640
$(window).height() returned 1135
$(document).width() returned 1280
$(document).height() returned 1136
screen.width returned 320
screen.height returned 568
screen.width and screen.height are correct. The window width and height are ~double, and the document dimensions are just weird. I'm not sure what's wrong with them or what's causing this. It's my understanding that everything should be 320x568. What can I do to make sure of this?
I have a question, client needs a mobile website and it has to display pixel perfect on mobile devices (emphasis on iPhone).
I have a .PSD design which is 640px wide.
This website tells me that older iPhones (<= 3) have width of 320px and newer ones (>= 4) have width of 640px.
My question is - how do I make a single page that will display the same on both the older and newer devices?
I know the newer versions have retina display, so do I leave the width and adjust everything to 640px or scale the .PSD down to 320px and adjust everything to that?
Thanks!
You'll need to use a meta viewport tag so that the browser knows to calculate dimensions based on the device. Then define your css classes using percentages (not pixels).
An example looks like this:
<meta name="viewport" content="width=device-width">
And a blog post: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
If you need to load different images for different screen densities, you can try using window.devicePixelRatio to determine the screen density and then use javascript to load the correct image.
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html