I'm using Chromium Version 51.0.2704.63 (64-bit)
<html>
<head>
<style>
html, body {
margin: 0;
}
div {
background-color: black;
height: 100px;
width: 50vw;
max-width: 100vw;
min-width: 360px;
}
</style>
<body>
<div></div>
</body>
</html>
Try pasting this markup into notepad, save as a .html file and run it.
Go into Chrome's device toolbar and choose Lumia 950
2 things you'll notice:
- In the developer tool's box model view, you'll see the dimensions are 490x100
- In the device toolbar, you'll see that the screen is 360x640
So what is going on here?
So is 490 the new 180?
You are missing
<meta content="initial-scale=1.0, width=device-width" name="viewport">
In your <head>.
Devtools is not broken, it's just simulating the the actual pixels you get on some of the mobile phones.
Related
I have tried everything. The body should not scroll as I run into issues with overscrolling on Safari iOS and Safari webapps (save to homescreen), so instead the main div "#content", has all the content with overflow scrolling.
The problem is, when #content is set to 100vh, the mobile bar, covers the bottom of the content. This is a common occurrence according to Google, and I've seen many solutions but the main one that worked is setting height: -webkit-fill-available;, but unfortunately this stops #content from scrolling on Chrome Windows.
main.css (with scrolling not working on Chrome Windows)
body, html {
padding: 0;
margin: 0;
color: white;
background-color: black;
overflow: hidden;
}
body {
position: fixed;
}
#content {
/* height: 100vh; Scrollbar present (good) on Safari iOS, Chrome iOS, Chrome Windows, but
bottom of page blocked by browser menu bar on Safari iOS and Chrome iOS (bad) */
height: -webkit-fill-available; /* Scrollbar present on Safari iOS, Chrome iOS (good), scrollbar
present but no actual bar to scroll down present
on Chrome Windows, can't scroll down (very bad), bottom of page
not blocked by browser menu bar on Safari iOS, Chrome iOS (good) */
width: 100vw;
overflow-y: scroll;
}
index.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<title>React App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="./main.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="content">
<b>START<br/>3<br/>2<br/>1<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>1<br/>2<br/>3<br/>END<br/></b>
</div>
</div>
<script>
// Stops overscrolling on "saved to home page" webapps
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
</script>
</body>
</html>
Probably goes without saying but, this isn't the actual page, it's how it would be constructed with React.
Sorry if I haven't provided enough detail, please say if you need any information—I'll provide it; I'm at my wits' end, I am 15 years old and I've been trying to make this page how I want it for days now.
Images and videos to show
Chrome Windows, height: 100vh; (wanted behaviour, can scroll)
Chrome Windows, height: -webkit-fill-available; (unwanted behaviour, can't scroll)
Safari iOS, height: 100vh; (unwanted behaviour, bottom of page blocked by Safari menu bar)
Safari iOS, height: -webkit-fill-available; (wanted behaviour, bottom of page not blocked by Safari menu bar)
1 and 4 are what I want to achieve.
Thank you so so so much if you can help me :)
This works but it uses Javascript, not too heartbreaking as I already had to use it to stop the overscroll. Kind of annoying how much Javascript you have to use to combat Safari!
const resizer = () => {
document.getElementById("content").style.height = window.innerHeight + "px";
}
window.addEventListener("resize", (_e) => resizer());
document.addEventListener("DOMContentLoaded", (_e) => resizer());
You say you tried everything so this a bit silly of me to ask but have you tried #media?
#content {height: 100vh; ...}
#media screen and (max-width: 767px) {
#content {height: -webkit-fill-available;}
}
If you tried this, what the result?
I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)
Trying to implement a style for a WebApp.
It seems that the CSS propery 'line-height' is different in the WebView.
I used this pen as example: http://codepen.io/bbredewold/pen/gGbht
The code is nothing special:
.flip {
position: relative;
width: 100px;
height: 100px;
}
.front {
width: 100%;
height: 100%;
font: 6em arial;
line-height: 100px;
text-align: center;
border: 2px solid #b4b4b4;
}
<div class="flip">
<div class="front">A</div>
</div>
Is this a bug? Or do I miss something?
Any ideas how to work around this? It's a headbreaker...
These are pictures with the differences. Picture 1 is problematic, picture 2 is nicely centered...
(I can't comment the original question, as my score is currently too low)
I realize this is a slightly old question but here goes:
I ran into something similar recently (Android 6, Chrome 55 etc) and I found that some of the Web Settings for WebView can make it interpret the page as if you had used the viewport metatag
<meta name="viewport" content="width=device-width, initial-scale=1">
In order to get the same result in Chrome I had to insert that viewport metatag.
This question already has answers here:
Why can't I do <img src="C:/localfile.jpg">?
(16 answers)
Closed 4 months ago.
I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).
Here's an example of what I've tried so far.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///Users/username/Desktop/background.png')">
</body>
</html>
If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.
Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
this should help
It seems you can provide just the local image name, assuming it is in the same folder...
It suffices like:
background-image: url("img1.png")
Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.
Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to
Raptor for adding formatting that displays full picture fit to screen,
and without scrollbars...
In a folder f, on the desktop is this html and a picture, pic.jpg, using
your userid. Make those substitutions in the below:
<html>
<head>
<style>
body {
background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
overflow: hidden;
}
</style>
</head>
<body>
hello
</body>
</html>
You forgot the C: after the file:///
This works for me
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
</body>
</html>
FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.
I want to write a div for every print page. So i did height of div 100%. Normally in every browser it is working well. But when i print this page it is not working in Chrome.
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<style>
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
.sayfa{
height: 100%;
width: 768px;
}
</style>
</head>
<body>
<div class="sayfa" style="background-color:#666666">fds</div>
<div class="sayfa" style="background-color:#cccccc">fds</div>
<div class="sayfa" style="background-color:#aaaaaa">fds</div>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</body>
</html>
This is solution, man...
Try this code that is
#media print and (-webkit-min-device-pixel-ratio:0) {
.sayfa{
height: 1101px;
width: 768px;
}
}
This CSS/Chrome issue has been gone over here:
height 100% in chrome
Hope this helps.
Set the width and height of your html and body elements to 100%:
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
</style>
I can't find any documentation on this bug, but it's definitely a bug, no doubt about it.
Your code will execute perfectly in non-Webkit browsers (I'm assuming Safari does the same thing) and shows up fine on the screen, then goes into a magic can of fail upon clicking print, right? What's a guy to do?
Answer, give the HTML and BODY tags a defined height in an "actual" measurement, not percents:
html, body {
margin: 0;
padding: 0;
/* etc */
height: 880px;
}
div.sayfa {
height: 33%;
}
The pages print the same from Firefox 14 and Chrome 19+ using the styles above.
My experiments yielded a printed-page height of 880 pixels for the printer we were using, your mileage will probably vary. EMs work, too, but that caused too many headaches, so I figure a definitive pixel value would work best.
It's a messy workaround, but at least it actually works.