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>
Related
I am working on a search engine for my website where results are displayed within a div along the middle of the page. Since I would like the search engine portion to be useable on mobile as well, I decided to use a media query to change the width of the div that search results are contained in to be 100% when the width of the screen is less than or equal to 500px, using the following media style rules:
#result_box {
width: 60vmin;
min-height: 100vh;
background-color:red;
}
#media screen and (max-width: 500px) {
#result_box {
width:100%;
}
}
With the following chunk of html:
<body>
<?php $var_value = $_SESSION['query_literal']; ?>
<div class="result_entry">
<hr id="seperator">
<div id="result_box">
</div>
</div>
</body>
However, the width of my 'result_box' is still 60vmin when I test on a mobile device. Does anyone have any idea how I can change this?
I'm pretty sure you didn't set the viewport meta correctly in header or forgot at all about it.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With this the the browser knows how to control the page dimensions and scaling.
Basically without it your website won't work responsivly.
width=device-width means you set to the width of the page to follow the screen-width of your device
initial-scale=1.0 sets the zoom level to 1 when the page is loaded
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">
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!
At some point I know I need to bite the bullet and do some serious reading on responsive and adaptive design, but I was hoping there was a really simple way to address this issue.
I have the following web page, shown here in my desktop browser.
And here is the same page on my cell phone.
Although it's probably hard to tell here, the banner is too small when viewed on my cell phone.
Ideally, I would like to have it so:
The width of the page content (and the corresponding width of my <footer> element, which has a top border) does not take up the entire width of the browser when it's full screen on the desktop, but does take up the entire width of my cell phone.
The banner would never be bigger than the pixel width of the image on my desktop, but would take up the entire width of my small cell phone.
Is there any simplified approach to this?
You can use media-queries to handle style changes based on the viewport. For instance, you can do something like:
JS Fiddle Example
/* Desktop Styles here*/
footer {
background: blue;
width: 500px;
}
.banner > img {
width: 300px;
}
/* When the screen is smaller than 560px, specify what properties you wan to change. */
#media only screen and (max-width: 560px) {
footer {
width: 100%;
}
.banner > img {
width: 100%;
}
}
Apart from media queries which you should seriously look into for serious responsiveness, you will also need to adjust the viewport meta tag in your header.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> tag to instruct the phone browser not to attempt to display the page as in a zoomed-out state.
So, for instance:
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
Then F12 and view in a phone emulation mode or check on your phone directly.
I'm playing around with media queries and started developing for a mobile screen. I have the first page relatively how I would like it, but I am getting a horizontal scroll bar at the bottom when I resize my screen to <480px. I haven't tested this on a mobile device yet but I'm assuming the same error will appear.
The site is: http://brad.sebdengroup.com/newOdynSite/index.php
To recreate error open the site, resize window to <480px and vertically scroll to the bottom
Here's the problem:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.
To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:
<span><strong>What have we done?</strong></span>
You can try to use overflow-x: hidden; on the <body> to simply hide the scroll bar. However, you'll not be able to easily see the content outside the view port.
For mobile devices you can use media queries to specify style sheets:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Or you can use <meta> elements:
<meta name="viewport" content="width=device-width, user-scalable=no">