I was having a hard time figuring this out.
I have a responsible website and i was trying to call it by an Iframe.
It worked perfectly on the desktop but it seemed too little on the mobile device.
<iframe src="https://religious-freedom.herokuapp.com"></iframe>
CSS
iframe:focus {
outline: none;
}
iframe {
margin: none;
border: 0;
width: 100%;
height: 100%;
position: absolute;
display: block;
}
body {
display: block;
margin: 0;
-webkit-overflow-scrolling: touch;
}
It turns out that the physical size of the smartphone is wierd.
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.
Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying
width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1">
Related
I am building a site with a simple topbar that needs to fill the entire width of the browser window. What I have now works perfectly on desktop browsers, Android, any iPhone in portrait orientation, and older iPhones in landscape view. On iOS 16 though, in landscape mode it persists in leaving a gap at the edges of the window.
illustration of the problem
The page structure is real simple, there's a single #page_wrapper_div with everything else nested inside.
html {
all: unset;
position:relative;
}
body {
margin: 0;
padding: 0;
min-width: 320px;
}
#page_wrapper_div {
min-width: 320px;
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
}
#topBar {
display: block;
position: relative;
}
I found a couple of posts from people who had what sounded like similar problems, which suggested I needed a viewport meta tag:
I have tried several variations of this, with and without an initial-scale=1.0 added in, and none of it makes any difference. It works correctly (i.e. the margins stretch to the edge of the window) in responsive design mode and on my own iPhone, I can only reproduce it on a physical iPhone running iOS 16, or in a hosted instance like BrowserStacks, so it's difficult to troubleshoot. Any suggestions?
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 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.
I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:
http://ellenflaherty.com/projects/carland/
Any idea why the discrepancy?
Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.
I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.
I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.
.projectimg {
bottom: 0;
/* display: inline-block; REMOVE THIS */
/* float: left; /* REMOVE THIS */
height: auto;
margin-left: 220px;
margin-right: 30px;
overflow: hidden;
width: 80%; /* THIS */
}
Hope that helps
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of HTML. It will help to adjust page size according to screen size.