I have an image that used to display ok, screenshot of small image, but now it is making itself very tiny when before it used to fill the mobile screen. This is the CSS:
img {
max-width: 100%; height: auto; text-align: center; box-shadow: 2px 2px 5px 1px #888;
}
a img {
list-style-type: none; text-align: center;
}
The image itself has a width of 320px so you would think it would fit but it is very tiny, here i a screenshot. the map image is the one that is tiny, the other is OK
Can anyone tell me what I have done wrong?
Set the HTML viewport to fix this issue. This instructs mobile devices to use certain scaling methods, making the images appear in the correct size.
<head>
<!-- Other head elements here -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Related
I'm trying to use the meta tag maximum-scale so the user can't enlarge the size of the viewport.
My code is down below. However, if I open this file with chorme, I can still use the mouse wheel to enlarge the viewport up to 500%, or reduce it down to 25%. How should I fix this problem?
Code:
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#container {
width: 100vw;
height: 100vh;
background: #f7f7f7;
}
#header {
width: 100%;
height: 60px;
background: #d1d1d1;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
from what I have understood reading this it works on devices that render pages in a virtual window or viewport like mobile screens, and your code works fine, I tried it in chrome dev tools setting the device to "Iphne XR" and emulating zooming by holding Shift + mouse click and drag across the viewport
I haven't been able to zoom in or out.
The meta viewport width=device-width doesn't seem to make any difference in my experiments. I made a test page to show you :
my main code is :
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
background: yellow;
}
.test_box {
background: red;
width: 360px;
height: 50px;
}
.test_image {
width: 16rem;
}
h1 {
margin: 0;
padding: 0;
font-size: 4rem;
line-height: 6rem;
}
p {
margin: 0;
padding: 0;
font-size: 2rem;
line-height: 2rem;
}
<!DOCTYPE html>
<head>
<title> My Project </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/styles.css">
</head>
<body>
<div class="test_box"></div>
<img src="/IMG/ham.svg" alt="image" class="test_image">
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
When I resize my window on a desktop it behaves the way it should.
But when I upload it to my server and see it on my Huawei p9 lite it doesn't fit. Either I put the viewport meta tag or not. It doesn't change anything !
(see in the pictures... at 1920px wide, 360px wide, and then on my mobile, either with the viewport meta tag or not. You can also see that mydevice.io recongnize my device as 360px wide)
What can I do ? Please help me. Thank you very much !
Its because you are checking it on domain wido.media and this domain does not contain any meta tag.
To check, open wido.media in your pc browser and view source by right click > view page source or press Ctrl+u
And wido.media open http://www.henriquevieira.com this domain in iframe and henriquevieira.com contain the viewport meta tag so if you open henriquevieira.com in your mobile you can see the difference
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
You got "fooled" by mydevice.io - if you scroll down on that site you'll notice a thing called CSS pixel-ratio, which in your case will be 3.
Here's an explanation of the pixel ratio
So your device simply is more than 360px wide
I have a .body element on my page http://crimeansurfers.tumblr.com which has a border frame that should touch the edges of the screen.
body {
font-family: 'Arquitecta', sans-serif;
font-size: 13px;
color: ;
border: #00f 10px solid;
background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
It shows up fine on desktop (the frame touches the edges of the screen, however, when I open it on a mobile, it shows like this:
As you can see, the right frame is not touching the edge of the screen, but it's supposed to.
I'm using also viewport to resize display for mobile devices with the following parameters:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
What do I need to change in order for it to work as I intended it to?
Thank you!
UPD maybe it makes sense to render the frame using some other method rather than body CSS tag?
There is an overflow being caused by the ul element within the #thumbs div.
You can fix this by adding a media query to the bottom of your style sheet.
<style>
#media (max-width: 414px) {
#thumbs ul {
padding-left: 0;
}
}
</style>
In this case I've set a max width of the media query to 414px as the problem only shows on screen sizes smaller than iPhone 6+.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #ffff99;
/*moe*/
}
#map_border {
width: 740px;
height: 500px;
margin: 0 auto;
background: #000000;
}
</style>
<div id="map_border">
</div>
</body>
</html>
I want the black rectangle to be of fixed width and height irrespective of any screen resolution. I have even used auto.
It works for some of the native screen resolutions in my laptop like 1600X900, 1280X720, and 1024X768 but doesn't work for high resolution like 1920X1080 which is also a native resolution and other non-native resolution.
1920X1080 resolution:
1600X900 resolution:
As you can see the rectangle should be smaller for high resolution 1920X1080 when compared to one with 1600X900. I made sure the browser is not zoomed. I checked with IE, Firefox, and Chrome. Same thing. I wonder if its the issue with my graphics display.
I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/
You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.