I'm having an extremely weird resolution problem and am hoping the tags are at least partially appropriate.
Here's what happens:
I have an image with size 1920x1080, my screen resolution is also 1920x1080 as indicated by the OS (Windows 8.1). Viewing the image in Windows Photo Viewer and clicking the button to make it "Actual size" makes it fill the entire screen from left to right, while being scrollable vertically, as expected.
I now use this image in a website/html file. I've tried both <img> and CSS background-image, resizing the element or the containing box to 1920x1080, no matter what I try, the image is too large and I see only about 2/3 of it horizontally. What's more, I've added a border to an absolutely positioned empty div and given that div width: 1247px; via CSS. The border goes nearly across the entire screen, leaving about 30 pixels on both sides combined, which leads me to the conclusion that for whatever reason, my browsers (tested in most recent versions of Firefox and Chrome) change their contents' resolution to 1280xsomething. Which I find very strange, especially since I'm using both of them in classical desktop mode and can freely display other windows on top of them without any graphical effects that usually happen when an application display its contents in a different resolution.
So, my questions are:
Is this a known issue or am I doing something wrong?
How can I fix this and make my browsers use my screen's resolution?
Here's a simple setup that reproduces the issue in question. Save as anyfilename.html, set screen resolution to 1920x1080 in system settings, open the file in a browser:
<html>
<head>
<style type="text/css">
body {
background-image: url(http://www.hd-wallpapers.com/download/black-glass_1920x1080_225-hd.jpg);
}
div {
border: 2px solid red;
width: 1247px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Related
For some reason png/jpg/svg files that I put into my img tag give at some random sizes a whitespace. Here is a link with a GIF:
https://gyazo.com/0cbbe95f7c9ca4e6e504448cacd8ea2c
In the GIF im resizing the screen with Chrome its developer tools -> device toolbar. Also if I click Ipad or some other device I see a white line. Its not on all devices but only on some. If I change image or check one of my other images I have the same white line but on different devices/sizes. Why does this happen?
What I checked/tried
My image tag has the display: block;
width/height: 100%;
margin/padding: 0px; Which it could never be since the whiteline is quite random.
object-fit/background-size: cover, contain, fill, everything basicly;
overflow: hidden;
vertical align: top, bottom;
div tag around my img and div tag.
Nothing here worked.
Is it possible that Chrome its device tool thingy is just not working correcty? I have some experience with it on different projects that I had to refresh the complete toolbar or switch between device to make it look normal or to make some code I added in the tools working. In the current case it doesn't fix it but maybe there are some other known issues?
This is my code
HTML:
<img src="./images/yellow-top.png" alt="top"> <!-- Shows white space at random sizes -->
<div class="bg-yellow"> <!-- height based on its content. Around 800px in my case -->
...
</div>
<img src="./images/yellow-bottom.png" alt="bottom"> <!-- Shows white space at random sizes -->
CSS
img {
display: block;
width: 100%;
}
Why does it do this and how can I fix this?
Developer tools was zoomed in at something else then 100%. This way it shows a small whitespace below an image. Setting it back to 100% fixed it. SVG file still gives me an whitespace. This is probably something within SVG files.
I am using the following viewport meta in my html:
meta name="viewport" content="width=device-width, initial-scale=1
Which works perfectly for mobile devices. However, on the desktop version all assets, fonts and even the various elements are increased in size by 20%.
For example, see the image below. Even though the image is defined as being 300px by 300px in the devtools, if I take a screenshot and measure it in Photoshop it is in fact 360px by 360px.
The browser zoom is at 100%. What am I doing wrong?
/** EDIT **/
So, I found out that Windows sets the size of images and text to a default of 125%. That is why my website images and text were looking bigger. Now that I can see that is the case, how can I find a workaround so that even with the setting at 125% the images and text will display as intended? Is it even possible?
The problem is that a CSS px is not equal to a physical pixel. The definition is complicated, but in desktop browsers, the ratio between a CSS px and a physical pixel (A.K.A devicePixelRatio) is equal to the OS display scaling factor.
This is done in order to adapt to various screen resolutions and their distance to the observer. In my screen, the image in the codepen you sent is 600x600 physical pixels, because my screen is high PPI. I would have difficulty seeing text rendered with the default size in pixels.
If you really need to set the dimensions in physical pixels, you can just divide each dimension by `devicePixelRatio, but that creates accessibility concerns.
I worked it out in the end. In jQuery you can add the following to make your website display as intended:
$(document).ready(function(){
checkBrowserDpi();
}
function checkBrowserDpi(){
if(window.devicePixelRatio == 1.25 ) {
$("header, section, footer").removeClass("zoom100");
$("header, section, footer").addClass("zoom080");
} else {
$("header, section, footer").removeClass("zoom080");
$("header, section, footer").addClass("zoom100");
}
}
$(window).on('resize', function(){
checkBrowserDpi();
});
and then have two classes in your CSS file as follows:
.zoom100 { zoom: 100%; }
.zoom080 { zoom: 80%; }
In this particular case, it checks the device pixel ratio when the document is loaded and every time the window is resized and then sets the correct zoom to the header, section tags and footer for desktop browsers. You set the zoom to any tag you wish.
** EDIT **
As #D.Pardal points out this does create accessibility issues which I had not taken into consideration. That said, if you do want to mess with the devicePixelRatio then the method above works.
My site looks good from computer's browsers, I've tried all different browsers, they all look as I intended. But when I tried it from my Samsung Galaxy phone's Chrome browser, something is not right. There are alternating blue and white sections on my page, on the mobile phone's browser, the blue sections got cut off on the right side, left with white space [ it should be all the way to the right ], yet now it looks like this :
What should I do to make it look like from a computer's browser ?
You can view the source code of the page from your browser's "view source" function.
The site is at : https://gatecybertech.com
There area a number of ways to fix this.
Remove white space with CSS
To simply remove the white space you could add a
body {
background: #yourcolor;
}
Make image responsive
How ever I would suggest setting the width of your image with a size in vw. This will make your images responsive.
You could also do what the below answer says and use SVGs or media queries but I tested the using the size in vw and found it worked just fine
Application
This is how you can set your images width with vw
#yourimageid {
width: 2vw;
height: auto;
}
Hope this helped!
The problem is a few of your images.
e.g.
first the Ted Murphee image
then the gate frame .png image
What is happening is the rest of your content is resizing to a smaller screen, while the images stay the same size and create that "whitespace" to the right.
What can you do ?
use .svg images so they will resize depending on the screen size
add a #media query, and make the images resize when the browser size changes
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
I have a background image that is 1024 x 1024 pixels; the reason for these dimensions is that I want the image cover the screen in both landscape and portrait modes. The image has a small logo right in the center of it, but otherwise it is a simple gradient. I want the image always centered; in other words, the logo must always in the center of the screen, in landscape and portrait orientations. I also want the image covering the whole screen, but don't want the background image creating unnecessary scrollbars; so I don't want it to be possible to move the image by dragging it around the screen.
Here is what I have tried (and for the sake of this example I am just using a style tag in the HTML):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
html,body {
width:100%;
height:100%;
}
body {
background-image: url('../img/background.jpg');
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
</style>
</head>
<body>
Hello world.
</body>
</html>
The issue with the code here is that the image is not centered (in portrait mode the logo shows to the right of the screen, in landscape at the bottom of the screen). It also seems that the background image becomes part of the page content so it causes scrollbars, meaning that the image can be dragged left and right.
I would prefer a solution that is just CSS and html, but will accept one with Javascript if it works. Please don't mention issues pertaining to other browsers here, I am specifically asking about Mobile Safari in this question. I have tried a LOT of the suggestions made in various answers and I am yet to find a solution that works correctly in Mobile Safari.
So here are my requirements again in point form:
background image always covers the whole screen (no white space showing)
image always centered (so overflow evenly divided between left and right/top and bottom)
image stays centered when iPad is rotated between landscape and portrait
background image is fixed (cannot be moved)
preferably a solution using just HTML and CSS (CSS3 is also fine)
Anwyone know how this can be done?
Update:
This problem might lie between the computer and the chair! ;) I will post an update when I have sorted out an issue in my UIWebview.
Ok. It is confirmed. There is nothing to see here! :) This problem was all of my own doing and the HTML that I provided actually works correctly. This went wrong because the HTML being loaded is an error screen and in trying to "fake" the error situation I caused an actual error where the UIWebview was loaded before it was ready. When I load the HTML at the correct time, then the centering suddenly works and the scrollbars dissappear. Everything 100%.
Background images have no height and width, their height and width is dependent on the parent's height and width in which they are applied to. So it is impossible for a background image to create scroll bars.
If you want the background image to resize depending on the screen size, use this:
background-size: cover;