I have a data table that displays 12 rows in a smaller screen. The resolution of screen is 1280x1024. I have to display more rows, say 20, in a device with larger physical screen but with same resolution as of smaller device.
How to go about it?
if really you mean same pixel resolution but different physical size, then answer is you cant (at least not at desktops)
there is some not reliable workaround for phones
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
If I understand your question correctly, I think CSS Media queries is probably your best bet.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
Assuming window.devicePixelRatio and device-width are set by display manufacturers and could potentially return incorrect values, are there any other reliable ways to accurately calculate the resolution of the physical pixels on a display?
I'll use my phone (Samsung Galaxy S9+) as an example, in portrait it has:
a screen resolution of: 1,440 × 2,960
a device-width of: 412
a devicePixelRatio of 3.5
The width of the device in physical pixels can be calculated by: device-width * devicePixelRatio
412 * 3.5 ≠ 1440
I'm willing to believe any one of those values is wrong. Perhaps the width in physical pixels really is 1442, or maybe the device-width is actually 411.42857142857142857142857142857, or the devicePixelRatio is 3.4951456310679611650485436893204.
Either way something's not right, and I'm left wondering how often this inaccuracy occurs and if there's any way to work around the issue without having to fallback on a database of manually updated known device resolutions.
I have created my website with html, css and javascript and designed it for iPhone X to start off. My website is going to target on Instagram so my main targets are all types of mobile devices. I'm using media queries in css and I want to check for screen height. I'm not sure but it sounds like a good approach for me because for example iPhones don't differ that much in screen width as they do in screen height.
This is my way of approach in css:
#media only screen and (min-height: 481px) and (max-height:666px){*css*}
This should be a query for iPhone 5, but I got really confused by points vs pixels so I was hoping some of you can help me out.
Google chrome shows me the screen size of iPhone 5 as 320 x 568. I was guessing these are supposed to be points but it works just fine with my media query entered in pixels while screen size of iPhone 5 in pixels should be 640 x 1136 pixels.
My media query for iPhone 5 works just fine in Google Chrome iPhone 5 "setup" but I also have a test iPhone 5 at home where responsivity seems not working at all.
So before continuing my responsive design I wanted to have this clear.. Why is this? Is Google Chrome showing points or pixels? Should I use points or pixels in my media queries? Why does it work with pixels in css when they are completely different when I google screen sizes?
I would still consider myself as a beginner so I would really appreciate not too complicated answers.
Thank you!
I have a website that needs to distinguish between mobile phones, tablets, and ordinary laptops. Normally I could use an asp.net function to tell, but the complication is that I want tablets to be treated as NOT being mobile devices. Any device with a screen diagonal greater than 7.5 inches would get the normal website, and any device with a screen dialog of less than this would get the mobile version of the site.
First I thought all I need to do is get the screen.width (I'm using JavaScript) and screen.height, apply the pythagorean theorem to get the length of the diagonal (in pixels) and then divide by pixels-per-inch.
The issue is this: Is "pixels-per-inch" always 96 for every type of device?
If not, I can't do this.
Thanks.
How do I know how many physical inches a device screen has?
You can't.
Is "pixels-per-inch" always 96 for every type of device?
No, not remotely. Not only do you have the issue of Retina displays, but if I have a notebook computer with a screen resolution of 1280x768, if the screen is 15.1" it's going to have a lower PPI than if the screen is 10.1".
I have an HTML page with a 1675px by 2640px image in it. I tried viewing it in an iPad and apparently mobile safari downsamples the images. We wanted to show a high quality image but safari restricts this.
I've been searching for a solution to retain the image size. I've been viewing it in iPad 3 on mobile safari. People are suggesting to use another browser but by default we are using mobile safari.
Are there any CSS, JavaScript or other solution to this restriction?
I'm sure you are just going to love this answer, but the short answer appears to be: "you aren't going to get 1:1 large sized images".
The slightly longer answer is that Apple intentionally forces things to work this way because before the way it worked was just to not load the image at all, or crash.
Now, for a fuller answer with citations...
Apple's Known Resoruces Limits
The thing is, when an image is decoded/decompressed it takes up a whole heck of a lot more RAM space than the images filesize. The formula Apple states is that devices with 512mb of RAM, like the ipad 3 you mention, will refuse non-JPEG images above 5 megapixels, which results in:
height * width <= 5 * 1024*1024
For JPEG, Apple notes they will subsample to allow you to view jpegs:
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
Note that it states 2 megapixels is the limit for full-sized viewing of JPEG, which is 2*1024*1024. As your image is roughly a bit over 4 megapixels, it will be subsampled on iPad 3. And no, there really isn't anything you can do to force it without using an external program.
To use an external program for minimal improvement, see this link where a person recommends GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari
And here is another Stackoverflow with a similar question/answer pair: Image Size Limitations in Mobile Safari
Mobile Safari does not downsample progressive JPEGs. Assuming JPEG is an acceptable format for your purposes, simply convert them to progressive encoding. Assuming you have an existing, non-progressive JPEG image, you can use a tool such as jpegtran to losslessly convert the encoding to progressive scan.
To enjoy the retina feature of iPad Retina and iPhone 4 / 5, use doubled size image as follow:
<img src="test.jpg" width="837" height="1320" />
Note the dimension is reduced to half, but the test.jpg does not require to resize.
Alternatively, you can prepare another set of high resolution graphics, and show it when retina screen is detected, using Media Queries ( Modernizr )
Pixel Density Theory: Retina screen puts 2 pixels into 1 pixel, e.g with 320px width, it actually contains 640px contents. Read more here: http://www.sitepoint.com/css-techniques-for-retina-displays/
I have a web application that is being used by browsers on desktop, tablet and phone. A toolbar (made in HTML) when used on tablet and desktop needs to have buttons that are 16 x 16, and then 48 x 48 on phones. The reason for this, is that 16 x 16 comes up as a good size on the desktop and tablet, but too small on phones (iPhone 4/4s, etc). 48 x 48 is too big on desktop and tablet, but perfect on the phones we've tested.
How can I do the necessary detection for this using Javascript?
I imagine that detecting the physical screen size in inches or millimeters would be a good way to go. Is this possible from within the browser? I've seen some information about detecting screen resolutions in pixels, but to me that seems flawed because the resolution boundaries between phone and tablet are blurring.
What is the most reliable method for detecting a tablet from inside the browser?
We are testing using an iPad 2, Android tablet and the Android Emulator.
CSS3 media queries work well for identifying device-widths (meaning screen-width) and there are some interesting techniques for hooking into them with JavaScript that Jeremy Keith has been toying around with that he discusses in this post from his journal. The general idea is that he puts a non-rendering css rule inside the media query then retrieves that css value via JavaScript to determine which media query is in effect. This identifies the device width ranges which you can then draw conclusions from about what kind of device you're displaying on.
The media query solution is a good one, but in case you do not want to integrate CSS into the solution and as your questions stated, use JS (only), you should be able to use JavaScript to detect if the device is a tablet vs. a phone. This can be done by detecting the default orientation using window.orientation in combination with the ratio of screen width to height.
if (window.oriention == 0){ // this is the device's default orientation
if (screen.width > screen.height) //means default orientation is landscape
isPhoneFormFactor = false;
}
The logic is that the default orientation for a device who's width is greater than it's height is most likely a tablet and not a mobile phone device.
To make it even more accurate, you should calculate the ration of screen width to height and ensure it surpasses a certain threshold to make the assumption more accurate and allow you to add a bit more logic to be even more so.
Originally I thought that what I needed to know was what kind of device the web application was running on, and then I moved on to thinking that I needed to know the physical screen size of the device. I now think that it is actually the DPI of the device that is relevant.
On a low resolution device such as a desktop monitor (typically well below 150 DPI) or an iPad 2 (132 DPI), the 16 x 16 buttons is a good size, but on a high resolution device such as an iPhone with retina display (326 DPI), the 48 x 48 buttons are better suited because 16 x6 16 shows up way too small.
Using Modernizr with it's .mq() function for running media queries, you can determine the device's screen resolution with Javascript code.
var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");
This page has a great list of many different devices and their pixel density.