I must be missing something obvious, but here it comes... I just want to establish a narrow viewport width (320px) on my browser to check / design the web layout for a mobile phone display. Why is it that if set a viewport width with the meta tag, the browser doesn't respect it? This is what I do:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px" />
<style>
.content {
width: 100vw;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<p> Hello, this is the 'content' </p>
</div>
</body>
</html>
It just doesn't matter what size I put in the tag, it just seems to use the native display size. Can anybody tell me what the problem is and how to actually do it?
You don't need to set a viewport to check mobile compatibility. Just, click F + 12 keys in your browser chrome, and click on the mobile devices icon. This way you can select any viewport profile and check your design. See the image below:
Related
Below is a simple HTML page that renders very differently in Chrome and Firefox. It looks like Chrome has a bug. I tried hard but could not find a workaround to make it work in Chrome. My best attempt was wrapping the img in a div with a height, but it does not work nicely when the size of the picture is limited by the width of the browser. Could you suggest a workaround to make it work in Chrome?
To clarify: in Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain. How can I make it work in Chrome?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Magic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div style="display:flex;flex-direction:column;max-height:100vh">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<img alt="goban" style="margin:auto;height:auto;width:auto;max-height:100%;max-width:100%;" src="https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg">
</img>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
</body>
</html>
I don't think it will work with an image tag, but you can apply it as a background-image to a DIV and use background-size: contain; (to make sure the whole image is always displayed without anything being cut off) and flex-grow: 1; (to allow the empty container to gain height) on it:
body {
margin: 0;
}
.outer_div {
display: flex;
flex-direction: column;
height: 100vh;
}
.img_container {
background: url(https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg) center center no-repeat;
background-size: contain;
flex-grow: 1;
}
<div class="outer_div">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<div class="img_container"></div>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
By setting a css 'height' property on a parent container 'foo' the calculated 'font-size' of the inner elements changes wrongly. This happens only on a mobile device on Chrome.
To test this please try to run the following code under Chrome and choose any mobile device in the developer console:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.foo {
height: 600px;
color: white;
background: teal;
}
</style>
</head>
<body>
<section>
<h2>Header in first section</h2>
<p>Text with a normal size. Text with a normal size.</p>
</section>
<section class="foo">
<h2>Header in second section</h2>
<p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p>
</section>
</body>
</html>
Then disable (comment out) the 'height' property on the class 'foo'. The calculated 'font-size' for the p-element should not change but it does.
Chrome also shows the wrong size when commenting out the 'height' property in the document itself and reloading the page (-> then the text in both p-element is bigger than normal).
Please help me out - is this a bug that needs to be reported?
It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Working with the experimental property
Setting a min-height of 1px or max-height of 99999. It seems that this will break layout on some mobile devices. (See post: Chrome on android resizes font)
I have problem with text width on mobile devices on this website.
I need to make text full width.
I try make div 100%, 1000px, insert text in table, make body min-width...
do you want to justify text on the screen?
You can use text-align CSS property to center.
like this
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
for below HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
or set margins of the screen like:
.center-wrapper{
margin: 0 auto;
}
It seems to me your problem has to do with wrong viewport declaration.
You should use
<meta name="viewport" content="width=device-width, initial-scale=1" />
instead of
<meta name="viewport" content="width=1024">
Because you want to make sure the viewport gets adjusted correctly according to the pixel ratio of every mobile device. See also https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag for more detailed information about usage of viewport
I have this minimal code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
<title>test</title>
<style>
html, body {
height: 100%
}
#container {
height: 100%;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"> </div>
</body>
<script type="text/javascript">
alert(window.getComputedStyle(document.getElementById('container')).height);
</script>
</html>
on a server at:
http://catplusplus.org.uk/catpsite/portfolio/test.html
so this code will alert the height of the container div which should be 100% of the browser window.
I've included the meta-viewport tag in the header which should ensure mobile zooming is set to 1:1 in terms of pixels.
when I load this on a LG nexus 4 running android on Chrome I get a height of 519px in portrait and 311px in landscape - which I think is pretty much right (screen size minus UI etc)
when I load this on the same phone using Firefox (v23) I get a height of 1134px in portrait and 718px in landscape, this seems wrong.
Is this a known issue, am I missing something simple, can someone fill the gap in my knowledge here please?
Thanks
James
p.s. just tested on Safari on iPhone 4 also seems off, reporting 540px for both portrait and landscape....
I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
}
#header {
background-color: orange;
}
#leftnav {
background-color: yellow;
float: left;
}
#rightnav {
background-color: blue;
float: right;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="leftnav">
leftnav
</div>
<div id="rightnav">
rightnav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.
Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....
Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.
If it were me I would make the following adjustments to the base template provided
Move the content div above the navigational elements within the source code.
Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.
The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.
The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.
Your code is wrong, but here's how you can fix it:
You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:
Microsft's Bing would flag this as an error and inform you to change it appropriately.
Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.
If you position an element using absolute positioning with a percentage value such as:
"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:
"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.
As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.