My app traces Capabilities.screenResolutionX and Capabilities.screenResolutionY. This outputs 1024x768 for my ipad mini. Okay so i begin shaping my app with 1024 width and 768 height for landscape display.
The problem is that my 1024x768 content is put in the middle of the ipad screen with a white space on both the left and right side. So i test it even closer. I make a green square with these dimensions and place it at x:0 and y:0. It's still wrong. So is my ipad screen bigger than what Capabilities.screenResolutionX outputs or is it just kinda bugged so you have to make everything some inches bigger?
In case it wasn't clear: It's only the width that doesn't match and have extra whitespace on both sides. The height is fine, an exact fit.
Ensure that requestedDisplayResolution is set to be high in the XML eg:-
<iPhone>
<requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>
Use 'Full screen' in publish settings.
Related
I've been trying to fix an issue where the full-width hero images on my Wordpress website appear blurry on some mobile devices, and in the process I've noticed that this seems to be triggered only at smaller sizes.
The images I'm using are 1920 x 1080 pixels.
Between a width of 1920px to 1024px the images look high-quality and unchanged as far as I can tell, but using Firefox's Responsive Design Mode, I've established that the smaller the image renders the more progressively blurrier (i.e. pixellated) it becomes.
If the browser window is resized to a width of 1023px or less, it becomes a little blurry, whereby setting the DPR setting to 2 restores it to the original quality.
If the browser window is resized to a width of 512px or less, the image becomes very blurry, and setting the DPR to 3 restores it to the original quality.
What's going on here? I understand that the images aren't Retina-optimised, but if this was the actual cause, wouldn't the problem be reversed - wouldn't it be the larger image size that would render blurry? Shouldn't the smallest image render at a high DPI considering it's being displayed at a size of 512px and the source image is much less than double (2x) the 1920px source image?
Would really appreciate some help figuring this out as I've been struggling with it for a few days and it's very hard to test against and debug.
A HiDPI image is really just one that's larger than the display size but crushed into a smaller physical space.
For example if your 1x image is 500px x 500px, then a 2x image would be 1000px x 1000px and 3x would be 1500px x 1500px. The HiDPI designation comes in because the device is able to display all those extra pixels in the same physical space as a normal screen.
So imagine a normal screen is 100px per 1 inch. So your 500px image would be 5in x 5in. The HiDPI screen might be 200px per 1 inch of screen so the 1000px image would still take up 5 inches.
Typically smaller images get blury on HiDPI displays because they're trying to "up res" something like a 500px x 500px image to a display size of 1500px x 1500px.
As for the problem you're experiencing, have you verified the issue on a real device not the FF emulator? Real devices are usually much better at that "up res" process and may not produce the same artifacts.
I've been trying to fix the width of a mobile view. The below linked page displays correctly on most devices (more than 400px wide), but has a margin on the right side of the header on devices with less than 400px horizontal, like the Iphone 6, Iphone 5 and Galaxy S5. The html element says to be the same width as the screen, but when hovering over it, the visual indicator displays otherwise.
I've tried hiding elements to see which element is the problem, but I have not been succesful in finding the problem. I'm hoping one of you might have some insight in the problem at hand.
Screenshot of the problem:
In this screenshot the header is not full width, while the content is. So the problem seems to be in the header somewhere.
The page is https://www.matrastopper.eu/bestellen/.
I'm assuming some part of the page is scaling problematic on small screens, but I can't find which.
change this width
.no-columns .box.right {
background-image: url("/media/layout/box-right.gif");
width: 380px;/* change this width */
}
this css
https://www.matrastopper.eu/css/screen201410.css?
line no 836
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.
I am trying to understand why if I have a Webseite working on 1920px width and I have smartphone with 1920px resolution, it will display different?
I found that Answer (URL) but this confused me even more.
An Example for me:
I have a div Header which has a 100% width and this Header contains 10 images, when viewing this on Desktop everthing is fine (Desktop width 1920px) Now I am changing to my smartphone which also has a Resolution from 1920px and some of the are not in the line anymore. So why isn't that possible?
The Answer with DPI is confusing me because:
I have 2 Screens, both of them has the same Resolution. My Android has bigger Pixel than my Desktop, so how is ist possible that they both have the same Resolution than?
If someone could explain me that or refers an article which explains that, I would be so thankful!
Markus
What he's saying is:
The resolution is the same but the PHYSICAL size of each pixel is different.
Let's assume your screen is 100cm long and your smartphone is 10cm long.
If your screen has 1920px, each one is 100/1920= 0.052cm long.
If your smartphone has 19202px too, each one will be 10/1920 = 0.0052cm long
I considered just one dimension to make it easier. As you can see the physical size of pixels is different and so is the result.
Now you might ask yourself "Ok, but how do I fix this?"
Well instead of saying "Make this item 10px long"
you can say
"Make it 1cm long"
We've seen that pixels size can change from one device to another, but physical units don't.
So 10 pixels might be longer or shorter from device to device but 1cm is always 1cm.
I hope i clarified your doubts! :)
Solution for me was simple:
Example:
Galaxy S4 Resolution (Hardware Pixel) : 1920x1680
Pixel Ratio : 3
Galaxy S4 Optical Pixel: 640x340
I need some help:
http://www.stansellelectric.com
If you go to any page on this website and re-size your monitor (or Firefox browser if you use the Web Developer toolbar) down to 1024x768, a horizontal scrollbar will appear both in the #contentwrap div and the page itself. Now, increasing the width of the window to 1039px fixes this, however I need it to stay at 1024px and not have a scrollbar anywhere.
I'm stuck, help please?
1024 pixels is the total width of the screen.
In order to fit content on a 1024 pixel screen, you need to account for the vertical scroll bar (usually 16-24px in width) and (in some browsers) the window's edge. These will take away horizontal space.
Bottom line: You need to use a smaller width for your content than 1024 pixels. A number that is popular among designers is 960 pixels, also because that can be evenly divided; it's used e.g. by the 960 grid system, a popular CSS framework.
However, in my experience, a slightly higher number (like 980 or even 1000) will also work well for the majority of devices.