I'm developing webpages to be viewd on Iphone. To get exact resolutions on iPhone
I tested following lines of code.
pageWidth = $j(document).innerWidth();
alert(pageWidth);
according to
http://www.iphoneresolution.com/ my Iphone 5 has 640px width,
But when I execute my code I get following alert.
this image is from Simulator, I get the same on my Iphone
Can somebody please tell me what is this so?.
Thanks
screen.width will give you the width of the device's screen.
You'll also want to note that the device's resolution does not correspond with the resolution the webpage displays in.
See http://www.mydevice.io/devices/
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'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 am using ✕ on my close button. In my chrome pc it displays the size that I wanted (font-size:20px) see the image below
However in my mobile I also use chrome but the size is smaller even they are the same page and I also check the view in desktop site but still the size is small see the image below
Js fiddle example https://jsfiddle.net/reginaldt/cag7870j/
codepen link: http://codepen.io/reginaldt/pen/yaJqyo
Any reason for this? Thanks.
UPDATE: I used samsung galaxy core prime on the mobile view to replicate the problem. But when I used samsung galaxy s6, it display the size properly.
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.
I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)
If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?
Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?
That's an intended behaviour.
Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.
As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.
<meta name="viewport" content="width=device-width" />
Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).