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".
Related
I am making an in-app message creation tool where you can design the message and send it to a phone.
So when I am designing it, if the set the font size to 16px, it looks fine on the desktop. But on the phone, the 16px looks too small.
How to determine that scaling factor by which I should multiply the font size which will enable me to see exactly how it will look on the phone?
I know different phones will have have different scaling factors, but I want to support about 10 popular devices.
So what is the number I'm looking for?
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/
I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
I'm trying to write application on the Samsung Bada platform. I'd like to make this application be available on different screen sizes and here are problems with this...
I have to make it work on mobile devices like: Wave 3 GT-8600 (480x800), Wave Y GT-S5380 (320x480) and Wave 578 GT-S5780 (240x400).
As i understood, we have to add device we need to "Device List" into our widget in bada IDE.
In that list we can see different phone models... I'm looking for Wave-model (in the bottom) so i will choose it, but i'm looking for different screen sizes... and i have no choice.
Maybe i loose something important in bada ide?
Than i visit bada developers website and saw there 3 type of files:
HVGA, WQVGA, WVGA - this files are for various screen sizes, right?
i put them to the "bada\2.0.5\Model" folder, but this didn't help me too.. in the device list still no more devices.
does someone know how to add more devices to device list, or how to make to be able to choose screen sizes in that list or.. maybe another way to create one widget for different screen sizes?
Aw, yeah.. my problem is: height and width of widget on different screen sizes.
This properties we can set in project.xml file in the root folder of widget. At this moment i have the same properties of widget for all screen sizes (from 240x400 to 480x800).
I set 220width x 130height for widget, and everything fine at small screen (240x400) and middle (320x480) screen, but in the large screen (480x800) widget can be get out off the screen if you move it at the right angle.
Also we can not set sizes of WIDGET larger than SCREEN size, because after installing widget will automatically became application (some bada magic), when i need only widget.
That's why i'm looking for possibility to set different "project.xml" files for different screen sizes.
If you're targeting bada 2.0, you can do a resolution independent app, where the right resource files are pickup up automatically by the system based on the current phone's specs. You'd get an abstracted display surface that's always 480 logical pixels wide, scaling to physical pixels is done internally.
And for development purposes, there are only three bada device types out there - WQVGA (240x320), HVGA (320x480), WVGA (480x800). Those are resolutions, not screen sizes. Screen size is roughly in the same ballpark, about 4".
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.