I am trying out the following HTML code on iOS Safari:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HTML5 test</title>
</head>
<body>
<img src="image.jpg" width="100" alt="Image" />
</body>
</html>
It looks fine on desktop browser. On iOS Safari (iOS 5, iPhone) though, the image width is 200px. As I used viewport with scale 1.0 it should be 100px too but it is not - any ideas why?
The logical pixels in the browser is two actual screen pixels, because the screen is so small relative to its resolution.
Using scale 1.0 gives you a relation 1 to 1 between image pixels and logical pixels, and a relation 1 to 2 between image pixels and actual screen pixels.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href='https://fonts.googleapis.com/css?family=Niramit' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="main">
<div class="bar">
<div id="title" class="header-text">title</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/uey85nbj/
Chrome Desktop: 27 pixels above and 29 pixels below
Chrome Mobile: 40 pixels above and 31 pixels below
If you put a background-color on the div that contains your text, you'll get a sense of what's happening (and this is what it looks like on Firefox and Chrome desktops for me, so I don't know how you got your first screenshot):
That div is very well-centered vertically, but because your text is in all lowercase, the optical alignment is off. Fonts don't always take up space in the manner you expect, in part because most of the characters in a font don't take up all of the space above and below. How the text interacts with the space will change from font to font. Change 'title' to "TITLE" and see how it looks.
Fiddling with the line-height can help you here, or you could do position: relative; top: -2px, or transform: translateY(-2px) or whatever it is would be most helpful.
I'd recommend getting away from mm as a unit too; pixels, ems/rems, percents, and viewport units better represent how things are measured in a page.
As #Akhil Aravind suggested, it appears the font is the issue. Here is the image without the special font.
I have the following blank HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
When I run this via localhost inside iOS Simulator Safari, I get this:
Notice the scrollbars, which hopefully indicate how much wider and taller the page is than the viewport. This is despite my meta tag placed in the head.
The same cannot be said for desktop Safari, only when run on mobile Safari like this.
Why is this so wide and tall by default, and how do I ensure it's no larger than the viewport by default, without adding a bunch of CSS?
I created the simple web page displaying just text "Hello, World!":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
On desktop computers with different sizes it looks OK. For example, in Chrome - Settings - "Fonts and encoding" it's configured this way: Standard font: 16
But on Android phones of different screen sizes and resolutions the displayed text is to small - maybe the height is about 0.5mm.
On Android phones - Chrome - Settings - Accessibility I selected font's size, for example, 120% and it the same text height is about 2mm.
Because of the selected font size on Accessibility I think "Hello, world!" text must be displayed with 2mm. It does not contain any formatting in HTML. But actually the text is displayed with height about 2mm.
Then I tried to add CSS file main.css:
body, p {
font-size : 40px;
}
In this CSS I use font-size : 40px;
The resulting HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Then it's displayed OK on phones (2mm text height). But text height is huge on desktop browsers. I know that there are different size units in CSS like em, pt, cm and in.
My question is which is the best and simple CSS code must I use in order to get the text height about 2mm on all devices with different resolutions and sizes. I know that it's probably possible to dynamically get screen resolution and size using JavaScript and then calculate on fly the font-size and use it even in px. But maybe there is a simple solution for that.
I am not adding about adaptive site design depending on device. I just need to display simple text on web page. But the text's height must be about 2mm on all devices for comfortable reading without any additional zooming.
Maybe try to change font-size unit in css file: cm insted of px?
<p class="test">Lorem ipsum</p>
and in css file
.test {font-size: 0.2cm;}
try on
https://jsfiddle.net/gyw48zhL/
give font-size : 2mm; in the body and assign view port by <meta name="viewport" content="width=device-width, initial-scale=1.0"/>.it will display as 2mm in all the browsers including mobile devices.
body, p {
font-size : 2mm;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
I've a website that I'm building which is 700px width on desktops and mobile. On the desktop the 700px div is centred. On mobile the 700px div just needs to fill the screen.
Test code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=700" />
<style>
div#wrapper
{
width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="/test.jpg" alt="Test image 700px width in 100px strips" />
</div>
</body>
</html>
This works fine across desktop browsers and most mobile phones. However on my daughters cheapo smartphone the browser zooms right in and only displays about 350px.
How should I approach this issue. You would think that it would be an easy situation to resolve but it's proving not too be! Messing about with the other meta tag attributes (initial zoom etc) has no effect on this particular smartphone.
The Huawei phones browser is Agent: Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari/534.30
Use this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Explanation:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Demo
Without view port
With view port
Read this - https://css-tricks.com/snippets/html/responsive-meta-tag/ and this http://www.w3schools.com/css/css_rwd_viewport.asp
I don't have an Android device to verify this, but perhaps this would be solved with a relative width and a maximum width:
<style type="text/css">
div#wrapper
{
width:100%;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
max-width overrides width when its conditions are met, so a smaller display like that on your daughter's phone should use a full width while a larger display would only be 700 pixels wide.
(I added the type attribute to your <style> tag for completeness. Your code should render just fine without it.)
Try this, hope it will solve your problem
<meta name="viewport" content="width=device-width"/>
instead of
<meta name="viewport" content="width=700" />
I would set your CSS width to 100%, not 700px. It's generally best to avoid hardcoding dimensions when possible. Also as suggested by another answer, max-width could be useful as it overrides width when specified.
You could then use screen size media queries(https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) to put a border div around the image on large displays.
Add the below link inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style Sheet
<style type="text/css">
#media only screen and (max-width: 699px)//media query for the resolution below 700px {
div#wrapper
{
width:100%;// this will took full width
}
}
</style>
I made a very simple site www.abasi.info/viewport
Consists out of:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img alt="18" src="18.gif" style="height:55px; width:550px;"></p>
</body>
</html>
The numbers should go until 18. But with my Android Phone (Version 2.3.6) the viewport doesn't adjust. It is zoomed in to much. I just had this one picture in the site (nothing else). And if the above viewport would work it would show all the numbers in the pictures until 18. It is very strange.
You need to make the Image 100% width and auto height, so the ratio won't mess up.
example -
img{
width:100%;
height:auto;
}
http://jsfiddle.net/1n9jnaxw/
you also can use max-width, but make sure you define the image dimensions first.
To limit the viewport to 550px you will have to change it to-
<meta name="viewport" content="width=550, maximum-scale=1, user-scalable=no">