problem: screen resolution and screen size not proportional
It called pixel per inch(PPI)
for example we can have same resolution on different screen sizes
1366px768 can be on 11" notebook, 15.4 laptop or 18" desktop
and 1 pixel isn't the same on different screens.
So if we put font-size for example 14px it will be less on notebook even on desktop
I open those question because haven't found the solution.
I tried
html meta name="viewport"
css cm, in, #media, #viewreport
js svg, navifation.userAgent and other tools
I looked at:
How can I find out a web page viewers pixels per inch?
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
Mobile web: how to get physical pixel size? and other questions
How can we set the same size on different screens or how we can detect PPI in WEB?
UPD. So it isn't any solution:
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
Related
Apparently when you set your device's display size to small react-native-device-info library thought that it's a tablet and according to that all the layouts and everything starting to act like tablets and my images aren't visible anymore. Does anyone having the same problem? Any suggestions?
Okay, I got it. With this new high density phones for example Google Pixel 2 XL or nexus or something like that some phone that you can change your display size to small. When you do that react native behave that your phone is a tablet and showing the tablet layout on that phone. So I actually checked some of the devices densities and there is not a single tablet over 2.0 density.
PixelRatio.get() < 2 ? DeviceInfo.isTablet : () => false
This is working for me if anyone is intrested.
Not a mobile design guy but have to work with some of my vendors who are making a mobile site for my company.
The visual design images they provided has 3 breakpoints. Basically lines which says how the site will look for 320px, 600px and 768px above.
Now when i asked my vendor which will show up for iphone 4 which has a resolution of 640 in portrait he says it will show 320 breakpoint. He showed me the following website which has a column called Device-W which he says should be used during development of the website.
http://screensiz.es/phone
Now the thing is before i go for the development vendor i wanted some one to help me understand what is that Device-W in laymans term so that am sure am not making any wrong decision.
This link should help you.
device-width refers to the width of the device itself, in other words,
the screen resolution of the device. Most mobile phones have a device-width of
480px or lower, including the popular iPhone 4 (with device-width:
320px), despite it technically having a 640 x 960 resolution. This is
due to iPhone 4's retina display, which crams two device pixels into
each CSS pixel on the screen. This is true for the Ipad 3 as well; its
reported device-width is 768px just like its predecessors, even though
its actual screen resolution is 1536px x 2048px. In general width is
more versatile when it comes to creating responsive webpages, though
device-width is useful when you wish to specifically target mobile
devices (and not desktops with a small browser window for example), as
rarely do desktops have screen resolutions below a certain number such
as 320px x 480px.
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }
I am trying to get a mobile site to behave. I am using the viewport meta tag to make the site fit all screens and be scalable. I have made all table and all images (over 200 px wide) 100% width, have set the viewport tag to:
content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
because I want it to be able to zoom in for those needing to read the text, yet have it open initially to fitting centered on the screen (any screen).
It almost fits on iphones and androids in portrait (testing on iphone 4 & 5 as well as galaxy iii android). But part of it is still not visible on the right? It fits fine on ipads or in landscape mode on phones. This is driving me insane, and must be something simple I am over looking. Live view is: password-reset.com/mobileusers/
I am using jquery colorbox on the page - could that be interfering? I thought colorbox was responsive?
Any help or suggestions will be gratefully accepted - what do I need to post of the code?
Your table that holds the More Info, Purchase and Testimonials has a width="340" on it. That is what is messing everything up.
I've written a Silverlight application that does not scale when I change from 96 dpi to 120 dpi The text and graphics does not change physical size on the screen as measured by a ruler. I've read in various places that Silverlight should adjust to changes in DPI configuration. The non-Silverlight portion of the web page scales as expected. It seems as if the Silverlight plugin is using Pixels as the unit of measure rather than 1/96 inch. What's the explanation?
I'm running Windows XP and setting the DPI in Wndows XPdesktop properties / settings / general / DPI Setting.
This wont help if you're after measurable coordinates (ie: displaying an accurate ruler in your app), but if you want your UI to be resolution independent, you can wrap it with a ViewBox, which is part of the Silverlight Toolkit