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.
Related
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
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;
}
When I try to write a £ sign on to canvas
context.fillText("£ ",600,165);
The output will write  £ to the canvas object, anyone got ideas on what to do... I tried
context.fillText("£ ",600,165);
but that only writes £ to the output object.
it's likely not to work if encoding of the page isn't defined. try this in the html page at the very top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- THIS ONE !! -->
blabla...
example below show it works when it is a html5 page with utf-8
document.getElementById("myCanvas").getContext("2d").fillText("£ ",10,10);
<canvas id="myCanvas" width="300px" height="50px">no html5 support</canvas>
Do you have to insert an image into the DOM to get its dimensions?
Yanick and many others say yes, add the img to the dom off screen to get its dimensions (after it is loaded).
Alex, Nickf and others say no, you can create an img element that is not added to the dom. Its image will then be loaded and sized.
Which opinion is right for "modern" browsers? Are there any tests which cover this question. Is this behavior by design for the browsers?
ADDED: I'm looking for a source / reference that confirms this behavior. I already have code examples a plenty.
Try this:-
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>answer</title>
</head>
<body>
<script>
var img = new Image;
img.onload = function(){alert(img.width);};
img.src = "image.png";
</script>
</body>
</html>
Which will alert the image width (assuming there is an image called image.png in the same folder as the file containint this htlm).
There's no need to add the element to the DOM to get those properties from it - just create the <img> element and the dimensions will be accessible in JS.
I have started HTML. I am making tables in it. I just tried breaking the webpage into two by adding a sidebar at the left but I am confused with its size. What is the standard size of a webpage? Here is my code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inter Notes Homepage</title>
</head>
<body>
<table>
<tr height="50">
<td width="200" height="610"></td>
<td width="800" ></td>
</tr>
</table>
</body>
</html>
There is no standard size to a webiste as such as it will vary according to the screen size of the user. You can generally do one of two things. You can work in % based measurements, where the tables sizes can be set to stretch the full browser size for example as 100%, or any other size for that matter.
The alternative is to use fixed widths such as pixels. Generally, we design sites to fit a 1024x768 screen resolution as a minimum. This roughly translates into 950px or 960px wide.
All depends on the design of the site as to which is a better option for you. I am more a fan of fixed width designs.