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!
Related
I've been trying to solve an issue that only happens on Windows phone 8. They use as a browser IE10. In many responsive design projects I've checked that all the mobile phones work correctly except this mobile phone and it's browser.
The issue
The images are bigger than the viewport itself making the image overflow by the right side of the screen. This overflow creates an uncomfortable scrolling in it's x-axis.
Possible solutions which did not work for me
Matt stow solution
CSS tricks solution
I'm testing with a nokia lumia 925 and a nokia lumia 520. If I apply this solution they both have different layouts. Especially the nkia 925 as it has a big resolution the media queries act strangely, as it was a tablet.
Does anybody have a clear and working solution which does not break other devices layout?
Just yesterday i had the same Problem and yes i visited the same pages like you.
I just added an
.im_the_parent_class_of_the_image {
overflow:hidden
}
to the parent class/element of the image and it still works fine for me and no other browser was affected.
hi im new here in creating a website. I really cant figure out it how can I make an auto adjustment of my website were it could fit on different screen resolution and also when the window is resized to much smaller without overlaps of the content of the website?
right now my screen resolution is 1680 x 1050, where I actually creating the website .
hope you can help me. thanks!
You most likely need to use what are called media queries:
#media screen and (max-width: 975px){
body{...}
div{...}
}
Read up on them at MDN
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.