<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.
Related
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;
}
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.
I am getting an error as shown below
Error Line 6, Column 467: end tag for "meta" omitted, but OMITTAG NO was specified
…ta,Manufacturing_Industrial,Educational_Training,Teacher,Engineering_Projects">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
How can I solve this ?
Please see the source code of the page below
<!doctype html>
<html>
<head>
<title>Jobslamp-free online resume creation and sharing,fresher jobs,experienced jobs,India jobs,Kerala jobs</title>
<meta name="keywords" content="Karnataka,Bangalore_Rural,Healthcare,Office_Assistant,Kerala,Ernakulam,IT_Hardware_Networking,Engineer,Sales___Marketing,Executive,Maharashtra,Mumbai_City,Retailing,Manager,Kollam,CRM_CallCentres_BPO_ITES_Med.Trans,Customer_Care,Hotel_Travel_Tourism_Airlines_Hospitality,Front_Office_Staff,Andhra_Pradesh,Hyderabad,IT_Software,Java_Developer,Pathanamthitta,Manufacturing_Industrial,Educational_Training,Teacher,Engineering_Projects">
<meta name="description" content="The best job oriented resume sharing system. Create and Publish your online resumes for FREE. Search and apply your dream jobs for FREE. Post your jobs for FREE.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Thanks in advance
The error message points out the solution: replace the ending > with />.
<meta name="keywords" content="all your keywords" />
You'll need to fix the other meta tags the same way.
If my doc type is <!DOCTYPE html> is it best or more correct to use
<meta charset="utf-8" />
or
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
to define utf-8?
Thanks.
The first one is only valid with HTML5.
The second one is also valid for older (X)HTML versions
With this doctype (indicating HTML5) both are valid, I prefer the first as it is shorter. :)
I'm building a webpage in Notepad. I'm using html5 for the first time. I believe I did the correct coding to insert these images but they don't show up on the page. Here is the code: I could use some help, please. Thank you.
<html>
<head>
<title>My practice website</title>
<meta charset="utf-8">
<html lang="en">
<meta name="keywords" content="html, css, javascript, history, poems, poetry"/>
<meta name="description" content="This site is about my personal life, poems, poetry, images of family, myself"/>
<meta name="author" content="schweidel tyson">
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="mainstyesheet.css"/>
<body style="background-color: #ccffff;">
</head>
<body/>
<h1>Welcome to my website</h1>
<img src="http://www.html.net/logo.png"/>
<p>This is basically a personal website build to showcase my fledging talent in webdesign to put up pictures of my family and friends. I also like poetry, so there will be some poems.</p><b/>
This is a link to a good html tutorial<br/><br/>
This is another great tutorial link<br/><br/>
A tutorial for styles link
<img src=My practice website/My Website/images/high yellow.jpg" width="192 height="256"/><alt="African Amereican light-skined woman"><br/><br/>
<img src="http://www.zimbio.com/My website/images/trendy.jpg" width="352" width="400"/><alt="African American Woman">
<img src="My practice website/My website/my new pic.jpg" width="104" height="104"/> <alt="me at the domiciliary">
</body>
</html>
Your HTML is a bit off:
<img src="..." width="104" height="104"/> <alt="me at the domiciliary">
alt is just the alternate text for the image. It's an attribute just like width, src and height:
<img src="..." width="104" height="104" alt="me at the domiciliary" />
Also, make sure your URLs are correct.
Also, without a DOCTYPE, your markup is invalid. Include a DOCTYPE (here's a HTML5 one):
<!DOCTYPE html>
<html>
...