I have a long website that I am embedding on another website. The below code works great on desktop browsers, but does not work on tablet or mobile.
On iOS, it is impossible to scroll as I attempt to move up and down the page. On desktop, there is no issue.
Question: How can I correct the code below so that scrolling always works in any browser?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body, embed {
width: 100%;
height: 100%;
margin: 0;
display: block;
}
</style>
</head>
<body>
<embed src="http://www.example.com">
</body>
</html>
I tried using the tag to include a scrollable webpage in another page. Same as your experience, the embedded page would scroll fine on desktop, but not on iOS. I switched to an iframe which does allow scrolling of the iframed content on both desktop and iOS:
<div style="overflow: auto; -webkit-overflow-scrolling: touch;height:450px;" id="my">
<iframe src="https://www.example.com" style="overflow: auto; -webkit-overflow-scrolling: touch; border: none;" scrolling="yes" width="100%" height="100%"> </iframe>
</div>
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.
EDIT: Simplified the question:
I have a 100% width "seamless" iframe in which I embed another (local) page.
When accessing the page directly on Safari, the contents are properly zoomed out to fit the screen.
However when the website is in an iframe, the page loads zoomed in and I have to zoom out manually in order to see it in full width. Is there a workaround for this?
Iframe code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iFrame</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html, iframe
{
height: 100%;
margin: 0;
padding: 0;
}
iframe
{
width: 100%;
display: block;
}
</style>
</head>
<body>
<iframe src="index.html"></iframe>
</body>
</html>
I am having troubles with elements size with CSS on mobile.
The background image have 853x480 px, that's supposed to fit perfectly I am wrong?
It's really very very simple CSS code, why that is going on?
Desktop Responsive view: https://prnt.sc/j7d1jr
On desktop browsers the page fit perfectly, the elements like background image and inputs displays perfectly.
On mobile all that resize, all smaller
Iphone mobile view: http://prntscr.com/j7d0ej
How to fix that?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Banco BRB</title>
<style>
body {
background-image: url("bg_login.png");
background-color: red;
background-repeat: no-repeat;
width: 820px;
height: 480px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<center><img src='user.png' height="75%" width="40%"></center>
<br><br>
<form>
<center><label><input type="text"></label>
</form>
</body>
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>
when zooming in and out my page Link of my page in Chrome browser the background is distorted and page looks like this Look of page after zooming in Chrome.
What can be changed in code to fix it for zooming in Chrome browser without distorting background graphic?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background:#d7df29 url('1.jpg') center center no-repeat;
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Thank you very much!
this line says, WE CANT HELP YOU YET...
background:#d7df29 url('1.jpg') center center no-repeat;
I just read you comment, you got an image, so it will be distoring with zoom in / zoom out...it would be better to go for CSS to avoid such distorting...