I have a modal triggered by an image that I have set to display at the bottom of the page as below:
.modal-dialog {
bottom:0;
position:fixed;
width:100%;
pointer-events:none;
}
This works fine on desktop browsers and on safari, but it's displaying at the top on chrome and firefox mobile.
Does anyone have any idea what is causing this?
Thanks in advance
Put this inside your head tag on the html page
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I'm trying to hide the scrollbar from every element on my Vue + Vite app. I don't want to disable scroll, just hide it, so I'm using the following code.
*::-webkit-scrollbar {
display: none !important;
}
It works fine and the scrollbar is hidden on desktop dimensions, but it doesn't disappear on mobile, even on Chrome devtools mobile. Here's my meta if that's of any help.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm using a default Vue Vite app, with some vertically overflowing content.
you could try to make the scrollbar transparent:
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
You should place this code on a #media tag, so that it only affects mobile.
This solution was taken from this thread.
A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and Safari.
A simplified example that produces the problem:
html {
background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.
UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.
I found the solution and wanted to post it in case anyone else has this problem.
The iPhone X has the notorious notch and home bar. Apple doesn't want content to be covered by those items unless you explicitly tell it to. To achieve the desired result you can remove the whitespace by simply adding the following to your style declaration.
CSS:
html {
// your css to create a cover image
padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}
And updated the meta tag to include viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
The padding tells iPhone X to add the necessary padding so the actual content is not covered by the notch and home bar.
The viewport-fit=cover tells the browser to extend the viewport "under" the notch and home bar.
I hope this helps someone!
I have a problem with this simple website. Only on mobile chrome browser, the width of the navbar is wider than the width of the body. I looked for fixed widths of some elements because this solved the problem for posts with the same issue but could not find it... Thank you for any suggestions..
Edit following meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
and following css:
body{
max-width:100%;
}
.navbar-default{
max-width:100%;
}
I noticed something strange which seems to occur on iPhone Safari only:
If the content is not higher than the viewport its possible to scroll a little bit anyway. Its even possible to scroll a little bit on an empty page. (The height of the Safari topbar?)
Screenshots:
I dont see this issue on iPhone Portrait or iPad. I tried iOS 8 and 9 in Simulator.
I'm creating an webapp and don't want this to happen if the body is not higher than 100% of the viewport.
Try it out:
<html>
<head>
<style>
html, body {
overflow:hidden;
}
</style>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<body>
123
</body>
</html>
Updated Answer:
Best solution I found was to remove on-default move events. This does not remove the ability to have links and functions but prevent the page from being scrollable. You would then design your pages using #media to create custom css for landscape/portrait and various screen sizes. link for #media example in comments. You could then implement scrollbars through jquery or javascript. since IOS 8 minimal-ui for viewport meta has been removed and there is no simple way around the screen height issue for landscape.
document.ontouchmove = function(event){
event.preventDefault();
}
html, body {
overflow: hidden;
position: fixed;
}
<html>
<head>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<body>
123456
</body>
</html>
i'm making page http://www.rhemapress.pl/www_physis/index.php?id=1. As you see header background is on 100% width (orange). It's first element in <body>. Code for this is: <div id="header"></div>. And CSS for this element is:
#header {
width: 100%;
height: 174px;
background-image: url("img/top-line.jpg");
position: absolute;
z-index: 6;
margin: 0px 0px 0px 0px;
}
It's ok on Safari on Mac. When i use Safari on iPad, header isn't set correctly - it's not 100% width.
Where's the problem? Could you help me with it?
I'm betting after looking at your code that you need the meta viewport tag..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
try adding
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to your <head></head>
Thank you all for answers. I think it's not possible to do this correctly, but if I in mistake then respond this with correct answer. I moved #header background to <body> in CSS and set repeat-x. Now it's working correctly but it's does not solve the problem with 100% width of element on notebook and mobile device (ipad).