To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.
I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).
Related
I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.
I'm attempting to make a page that will be compatible both with a PC browser and a browser on a phone.
Essentially, I want to size my elements as large as I can on the smaller screens (ideally, even a little bit larger), while confining everything to a narrow vertical band in the center on a PC browser window.
You can see the look I'm trying for here:
http://www.hoggy.com
I've attempted to read the browser's width to tweak the data on the fly, but I find I cannot get a reliable width on all platforms.
So I've attempted to center things, and make the image and table sizes be a percentage of the page size... but on a phone it's too small (thus I would like it to be actually a little wider than the phone screen) whereas on the PC, I want my width to be, effectively, min(100%,500px).
Is there any way to do that?
Simplest answer:
html
{
max-width: 1024px
}
I have set a fixed height for a div, let's say:
div.box {
height: 250px;
}
Using a tool (Meazure) which measures the pixels of the screen, I've noticed that on my desktop PC, which has a monitor of 1680x1050 pixels resolution, the pixels of the box are 250px (the right value); however, in my laptop, which has a 1920x1280 resolution display, the pixels measured using Meazure are different! It shows 539 pixels...
The same thing happens for offset values given in pixels... I notice different behaviours among different screens and devices (on my smartphone this effect is much more amplified...)
How can I set a "fixed" value which will appear the same for every device?
(Note: I don't want to use 100% for the width, since I want the box to have a fixed value even after resizing the window).
How can I set a "fixed" value which will appear the same for every device?
That's the thing, though: a "fixed" pixel value wouldn't appear the same on every device, because high-density screens are a thing that exists.
That 250px box that looks fine on a 72ppi screen would be itsy-bitsy on a high density 300ppi screen (specifically it'd be 24% of the intended size.) Browsers compensate for this using the device pixel ratio to adjust the specified pixel value to an appropriate size for that screen on that device. (Your 'meazure' tool doesn't appear to be taking this pixel ratio into account, which would seem to rather limit its usefulness, as it will only give accurate results on a traditional low-density screen.)
In theory you could undo this by multiplying the size of an element by the inverse of the current devicePixelRatio, but the result would be the opposite of what you want: the elements would have the same number of physical pixels, but would look completely different sizes on each device.
In practice it's mostly safe to ignore that this is happening at all and trust the browser to adjust your specified sizes correctly. (Take measurements using a density-aware tool, or the browser's own developer tools.) The only case where you really need to take this into account is if you include high-resolution bitmap images for use on higher-density screens; in those cases you'd use #media queries to determine which image the browser should use, such as
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* 2x-res images here */
}
/* low-res images here */
(the -webkit prefixed value is, of course, vendor-specific; resolution is the not-yet-universally-supported standard.)
I would first suggest to first check actual CSS properties. Right button -> inspect element and to see if on your PC and laptop div.box height is actually set to 250px
Maybe due to different resolutions, different styles are being applied.
If you have a www. page to look at, post it in comments
I'd like to categorize devices by screen width in client-side JavaScript code
All devices fitting to one hand (7" less) to mobile category
Treat other devices as desktop devices
Fallback: Treat devices which do not support necessary APIs as mobile devices
Question
Which related JavaScript and CSS APIs I could use to detect the screen physical dimensions? Please note that these APIs do not need to be necessarily supported in older browsers, as there is safe fallback. Also, I don't care about legacy desktop browsers either.
Firefox support is optional - if they have compatible APIs already.
Please note that this is about physical dimensions, not pixel dimensions.
There's no direct way to get the screen size in inches, but there are workarounds that use screen density to find the device size. It's not perfect, but you don't really need to know the exact size to 5 significant figures. Also, it is normally better to simply use pixel values, IMO.
HTML
Make a test div, and then see the number of pixels displayed to get the pixel density, then use that in your calculations. This should work, assuming that your browser/OS are configured properly (it didn't work in the this question but it was within half an inch on my computer).
EDIT: This is 100% wrong. The inch/cm measurements in CSS aren't based on an actual physical measurement. They're based on an exact conversion (1 inch = 96 px, 1 cm = 37.8 px). My apologies.
CSS
The best way to detect physical screen size is to use CSS media queries. The min-resolution and max-resolution queries can be used to get the resolution in either dpi or dpcm:
#media (min-resolution: 300dpi){
// styles
}
Combining it with the min-device-width and max-device-width queries, you get something like:
#media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
// iPhone
}
The problem is that if you want to target 7 inch devices, you'd have to have many resolutions and corresponding widths that go together, which could get complicated.
For more information:
MDN- CSS Media Queries
MDN- Resolution
"Mobifying" Guide
High DPI Images for Variable Pixel Densities (Somewhat Related)
Javascript
You can use window.devicePixelRatio to determine the screen density. From Android's WebView Reference:
The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x.
Then using this, you calculate the physical size by dividing this by the total number of pixels, which can be calculated with window.screen.width and window.screen.height (Don't use window.screen.availHeight or window.screen.availWidth because these only detect the available height).
For more information:
Android Webview Reference
MDN - Screen.width
MDN - Screen.height
devicePixelRatio Explanation
better to use CSS
#media screen and (max-width: 672px){
//your code for mobile category
}
#media screen and (min-width: 672px){
//your code for desktop category
}
I don't know if this is possible. Check out this non-functional website:
http://imageworkz.asia/sixsensestester/
When viewed in a big screen, it looks as if the container floats in the center of the screen but when viewed with a smaller screen, let us say, by a 1366x768 monitor, it zooms and shows as if the site is zoomed. I do know that screen resolution matters, so is it possible to make the website's zoom adjust accordingly to the size of the screen.
What you're looking for is called Media Queries. It uses CSS to detect the viewport size and set style rules accordingly. There are a lot of tutorials about them so learning them should be easy to do.