I have a website which I used the meta name="viewport" content="width=device-width" in it . but the width of that is not match with the width of mobile devices (just mobiles ) . what should i do to match it with the mobiles screen ?
Try adding a style that sets the width dependent on the screen:
body {
width: auto;
}
If you're designing for only mobile devices the W3 site has good tutorials: W3.CSS
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>
<!-- Content here -->
</body>
</html>
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
So in html i specify a path to an image (for example:
<img src="img_galaxy.jpg">
Unlike chrome, when i inspect element i this don't see this image nor other resource displayed in network monitor section.
i have a small gif to demonstrate about what i mean. Sorry for loss of quality, i had to optimize.
[Left: Firefox | Right:Chromium]
Sample code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_320.jpg 320w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_914.jpg 914w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1321.jpg 1321w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg 1400w"
src="img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg"
alt="">
</body>
</html>
I am using ejs in node for creating an app. And in my ejs, when I navigate from one page to another I have to render the header also to have the styles.
How can I make this common for all pages?
<title>Static Website </title>
<meta charset="utf-8">
<meta name="active-menu">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles/abc.css">
<link rel="stylesheet" type="text/css" href="./styles/def.css"> ```
I don't want load styles on every routing. Render all the styles on first page itself
ejs will render the page every time you refresh the page, so you need to put every css you need. you can pass var that say if a css is needed ex: isDefNedded = true and make a if statement in your ejs header
i have programmed a website, for a client and now im developing a smartphone template.
I used max-device-width as media query to separate smartphone and tablet.
Everythng is working fine, but iphone 4 zooms the website.
I dont know if i defined viewport wrong or is a bug?
Website is:http://mksgmbh.com
I used following Viewport
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi' name='viewport' />
<meta name="viewport" content="width=device-width" />
I tried to set initial-scale to 1 but it doesnt work too.
As I look at the site now you have mulitple viewport tags. Try removing them all and replacing them with either
<meta name="viewport" content="width=device-width, initial-scale=1.0">
or if you want to prevent user zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
UPDATE
Also, in you media queries you use max-device-width, e.g.
#media only screen and (max-device-width: 760px) {
...
}
Unless you are trying to target specific devices, you could try just
#media only screen and (max-width: 760px) {
...
}
Device width and width aren't the same thing and for responsive design, width will usually get the results you want. This link has some more background info about the differences
Hope this helps!
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>