If I add width to any element on page which is larger than screen than on mobile devices (or Developer Tools enabled Touch simulation) I get empty space below footer.
Original site which has problem: https://www.kanemi.lv/oskarsvesters.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body style="width: 2000px;">
Test
</body>
</html>
body {
min-width: 0;
}
try this
Related
I'm writing a web app for a an iPad and I want to overlay an element over an iframe, everything seemingly works fine with nearly all devices.
I have the ability to interact with the link or text that's overlayed and have the ability to touch and use the iframe beneath,
but if I change the device to an iPad on chrome dev tools or other browsers the iframe ceases functionality while the overlayed elements continues to work.
I have simplified it down to this code and the issue still remains:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.myWrapperClass {
position: absolute;
z-index: 99 !important;
top: 0;
right: 0;
}
iframe {
position: relative;
margin: auto;
}
</style>
<div class="myWrapperClass" id="content">
<div class="myClass">
Some Stuff Here
</div>
</div>
<iframe frameborder="0" src="https://example.com" id="myIframe" width="100%" height="800px">
no show
</iframe>
</body>
</html>
I have tried a lot of things like not using absolute positioning and using negative margins and fixed positions, pointer-events, z-indexing and others but to no avail. The issue still remains on iPads.
I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
I created the simple web page displaying just text "Hello, World!":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
On desktop computers with different sizes it looks OK. For example, in Chrome - Settings - "Fonts and encoding" it's configured this way: Standard font: 16
But on Android phones of different screen sizes and resolutions the displayed text is to small - maybe the height is about 0.5mm.
On Android phones - Chrome - Settings - Accessibility I selected font's size, for example, 120% and it the same text height is about 2mm.
Because of the selected font size on Accessibility I think "Hello, world!" text must be displayed with 2mm. It does not contain any formatting in HTML. But actually the text is displayed with height about 2mm.
Then I tried to add CSS file main.css:
body, p {
font-size : 40px;
}
In this CSS I use font-size : 40px;
The resulting HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Then it's displayed OK on phones (2mm text height). But text height is huge on desktop browsers. I know that there are different size units in CSS like em, pt, cm and in.
My question is which is the best and simple CSS code must I use in order to get the text height about 2mm on all devices with different resolutions and sizes. I know that it's probably possible to dynamically get screen resolution and size using JavaScript and then calculate on fly the font-size and use it even in px. But maybe there is a simple solution for that.
I am not adding about adaptive site design depending on device. I just need to display simple text on web page. But the text's height must be about 2mm on all devices for comfortable reading without any additional zooming.
Maybe try to change font-size unit in css file: cm insted of px?
<p class="test">Lorem ipsum</p>
and in css file
.test {font-size: 0.2cm;}
try on
https://jsfiddle.net/gyw48zhL/
give font-size : 2mm; in the body and assign view port by <meta name="viewport" content="width=device-width, initial-scale=1.0"/>.it will display as 2mm in all the browsers including mobile devices.
body, p {
font-size : 2mm;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>
I believe it has something to do with viewports? However, I'm not entirely sure on this!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag allows you to target mobile devices and sets the width to the screen size.
Documentation provided here!
Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
You can use the media queries !
looks like this:
#media (max-width: 640px) {
//your css to make it full screen
}
Given the following page that includes an iframe
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="min-height: 100; margin: 0px">
<iframe src="testpage.html" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%">
</body>
</html>
When it is launched, the iframe would only seems to load part of the text from testpage.html. How would one make the iframe show the entire content of testpage.html?
Set your html and body height to 100% too.
html, body { height: 100%; }
You may (or may not) also need to set display on iframe to block:
iframe { display:block; }