I am trying to create website in kiosk device. It is working fine when I test it in my browsers(chrome). But when it comes, to kiosk device, the page is fully distorted. The kiosk screen resolution is 1980 x 1020. Actually my page has two columns width 50% each. And each column has some fields arranged.Can somebody please guide me as how to start with the media queries for this resolution.
If you have made the website for smaller resolutions and then you will put kiosk resolution, the images and other elements are going to be bigger (so will be distorted).
You need to implement in your website different resolutions (thinking in different devices) and in this case you need to think in the big resolution that you can put your web, ie: Full HD and then resize to smaller resolutions.
Related
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
I came across a strange problem while I was testing a simple webpage made in webflow, for responsiveness. Now this is not a webflow question, but I think the problem has something to do with the resolution, physical screen size and pixel density. Just it's not clear to me what is happening.
So there were 3 media queries. One for mobile/iPad (we will ignore them since they worked as expected), laptop screen(1280 to 1024px) and large desktop screen (equal to or above 1920). I styled the site on 1920 and the chrome Dev tool also rendered it for lower and higher screens as I expected. But when the site was viewed in a MacBook whose resolution is much higher than 1920 but the physical screen size is much smaller than a traditional monitor, rendered the media query styled for laptops. I expected with its high resolution, it will display the highest media query.
Why this has happened and how to get around this? Or this is actually okay and no fix is needed?
I'm a bit confused about how device screen emulation works in chrome and how to use it to write affordable media-query. e.g.
IPhone X
Real device screen-size: 1125x2436px
Emulated device screen-size: 375x812px
I know that a resolution like that easily take two full-hd screen to be shown at 1:1 scale with the actual monitor resolution (pixel density), but the emulated res is not simply the result of a zoom-out, because if I zoom in or out the view, pixel size is about the same, and this make me think that chrome is suggesting me that the emulated resolution should be my reference for layout, like it is the real-device res.
But if it is, how this resolution is calculated? Why I should use this instead of the actual device screen-size?
While phone screens are usually high resolution like Full HD or Quad HD, their browser viewports are not, instead they are the resolutions Chrome shows you in the developer tools.
This helps you when setting up your CSS media-queries as you don't have to handle every single resolution of every specific device.
But if it is, how this resolution is calculated?
It is just a scaled down version of the actual screen resolution for that given device.
Why I should use this instead of the actual device screen-size?
Because the actual resolution of the viewport is that one and not the device screen size.
You can read more about this here: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
I recently started to step in responsive design. I used http://responsivepx.com/ to test how my design will look on every screen resolution. I have a mobile phone (galaxy prime core) which according to that site it's 480X800 screen resolution. The thing is, I tried to set a breakpoint on (min-width=480) px but my phone didn't respond to that breakpoint. After further testing, the phone responded to the breakpoint when I set (min-width=320px) it didn't respond when I set it (min-width:321px) so I figured my phone's actual width was 320 in pixels ...
my question is : what does that mean and is there a way to calculate it or is it just width - 160 ?
Device width (value your browser sees and you use in media queries) is not "width - 160", it is "physical width / device pixel density". Your phone's is 150%, so it is 480 / 1.5 = 320.
For nice overview of common screen resolutions of mobile phones I'd suggest http://screensiz.es/phone.
I think you can find a list of the most commom devices on the internet. I don't think you can do it for ALL the mobiles (there are thousands) but a lot of resolutions are the same. here is a website with some info (in spanish): https://norfipc.com/celulares/medidas-pantalla-resolucion-telefonos-celulares-tabletas.html
and here is a picture with others: http://www.destacaimagen.com/wp-content/uploads/responsive-web-design-chart1.jpg
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.