Body takes window sizes as planned, but if I click on mousewheel in Mozilla Browser or just scroll right/bottom in ipad I've got this margins. I assume that this happening because of some content, which first appears in document and then hides, but may be not that... How may I solve this issue? Thanks in advance!
Btw, I use <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> in <head>
You should give the CSS overflow property a try:
html, body {
overflow: hidden;
}
Related
I am trying to understand how viewport and initial-scaling works. I read this, this and this and tried the following experiment, which I can reproduce on a samsung galaxy s4 using firefox version 43.0.
If I open a webpage on the galaxy s4 containing this code:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=2.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 8</div>
</body>
</html>
then I get the following result:
This makes sense to me, because the div has a width of 300 CSS pixel, the galaxy s4 has 640 device pixel, and initial-scale=2 should force my phone to use 600 device pixel to represent the 300 CSS pixel div-container, which gives a blank space of 40 device pixel (however, the blank space does look wider then 40 device pixel to me but I will ignore it for now).
Then, I changed the initial-scale from 2 to 1:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=1.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 9</div>
</body>
</html>
Since initial-scale=1, I assumed that my phone only uses 300 device pixel to represent the red bar. However, I get this:
Why is the redbar now 640 device pixel long instead of 300 device pixel?
In your second example, your viewport meta tag is over-constrained. The browser will limit the minimum zoom level such that you can't zoom out to see beyond the extents of the content. In your case, the content is ~300px and the screen size is 640px so the minimum-zoom level would be ~2.1. However, you specified initial-scale=1.0 so there's no way to realize that. In this case, the browser chose to honor the initial-scale by extending the content-width to allow the specified scale.
The first case is a little more puzzling to me as the same thing should be happening to a lesser extent. Here's a picture of how it looks in Chrome on my Nexus 4 which has the same screen height.
In general, the viewport meta tag isn't specified and the behavior in these kinds of cases will vary by browser. I would avoid setting the initial-scale at all and let the browser do that automatically. Typically they will try to zoom out to fit all the content on the screen.
While using Firefox (23.0.1) and jQuery Mobile (1.3.2), I get the following warning from my code: Empty string passed to getElementById(). The message appears in the console (Tools > Web Developer > Web Console). I would like to eliminate this warning.
I have seen a number of people ask similar questions, most notably: Best way to locate source of Warning: Empty string passed to getElementById() The answers seems to fairly consistently point to the use of '#', implying the user is at fault.
I have tried to produce what I feel is the bare minimum of valid code, and I've found this warning is still exhibited. I assume, from the other posts, that it is my code that is at fault. Can anyone show me how to fix this issue?
As per other users' comments, this warning does not appear in Chrome (version 29.0.1547.57)
Thanks in advance!
Minimum valid code that reproduces this issue:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
In my case it was caused because I forgot to specify a value for the 'for' attribute of a label:
Missing id
<label for="">Stuff:</label>
fixed
<label for="someID">Stuff:</label>
EDIT: Removing the for attribute also prevents that warning
<label>Stuff:</label>
As indicated in a deleted answer and in the comments, this was a bug in Mobile jQuery and it's now fixed. Compare the behavior of 1.3.2 vs 1.4.5 (the current version):
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<!--script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script-->
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
After going through your jsfiddle I still didn't get where the the function document.getElementById() is being called. I used to also face this problem, but since you are using jquery-mobile its better to use $(#id) as selector just check whether this reference document.getElementById() or $('#id') is being called before the DOM is ready..
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I dont know exactly how is it called, but I saw on some youtube tutorials that there is a way to sort code by family. I mean, if u have some code written in sublime text 2 ignoring family order, you can just select it and press some hotkey to sort it. Im really new to coding and i dont know how to make it clearer.
I googled it but I havent found anything.
Like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
To this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
So, what you're trying to do is probably called "auto-indenting" or "auto-formatting".
You might find this question and answer helpful: How do I reformat HTML code using Sublime Text 2?. According to it, Edit > Line > Reindent should do what you're looking for.
The word you are looking for is formatting code :).
In sublime text go to Tools->Command Palette(or press Ctrl+Shift+P) and then type Reindent Lines and press enter.
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0" />
this required be before any other styles either embed or linked?
NO,HTMLMetaTag is independent to CSS.
I think HTMLMetaTag will be executed before any styles, as CSSDeviceAdaptation is important than metatag when setting viewport.
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}