I want to display a specific link of my flutter web app in an iframe.
Purpose:
Create multiple dynamic websites on custom domains managed with 1 flutter web app
Things I have tried:
Making iframe dynamic using javascript code, but onLoad does not trigger
iframe with 100% height and width does not work
Problem:
100% width works fine using:
<meta name="viewport" content="width=device-width, initial-scale=1">
but the height does not take up the entire space
Finally figured out how to do it.
iframe {
width: 100% !important;
min-width: 100%;
height: 100vh !important;
align-self: center;
border: 0;
}
The important thing to note was that scroll was not working when flutter web was put in iFrame in Safari.
Solution:
<script>
document.addEventListener('touchstart', {});
</script>
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.
I am trying to create a mobile site where the body fills the entire viewport.
I've written the following in the styelsheet
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
however, when using the chrome dev tool's responsive mode, css starts doing weird things.
screenshot
Is this simply a browser bug, or is there something I'm missing here?
Mobile browser do some automatic resizing and some other stuff. You could try to add the following line to your page in the head element:
<meta name='viewport' content='width=device-width'>
This line sets a setting on the viewport, namely that the width of the viewport should always equal the device width.
My website is hosted on blogger.com but I uploaded a completely custom theme and have adjusted the code to change the design a bit. The theme is mobile friendly except that my actual blog posts text is only showing half the page on mobile devices. It's as if the page is cut in half so half the sentence isn't showing. Even if you attempt to zoom out. Its just showing the desktop view on mobile without scaling so only half is visible. Everything else works perfect on the mobile website. I'm lost with how to fix this...thinking of adding meta tags to the head for each mobile device? I tried to add
<meta name="viewport" content="width=device-width, initial-scale=1">
but it didn't work. Basically, I need to change it so it automatically scales blog posts for different mobile devices.
CSS for my blog post font and page width has been specified
#test{
width: 680px;
margin: 0 auto;
text-align: left;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.01em;
}
HTML
<div id="test">BLOG TEXT</div>`
Wondering if there is an easier solution?
Cheers,
Here's one thing you can try:
#test {
width: 680px; /* your main container */
margin: 0 auto; /* centering it */
max-width: 100%; /* don't let the container be bigger than the body! */
/* ... the rest of your css... */
}
That way, if the viewport is smaller than 680px (most cell phones are), your content won't overflow. If that doesn't work, you might consider posting a link to your blog here so we can see the full context of what's going on.
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 my main widthfix div for my 960px wide centred site is brought into HTML5 Boilerplate it misbehaves on iPhone. In Safari on the iPhone the div extends off screen on iPhone. It works fine on my laptop screen browsers & everywhere outside of HTML5 Boilerplate.
I haven't changed anything inside HTML5 Boilerplate yet apart from add a widthfix div with the following class:
#widthfix {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}
...I've just worked it out it can be corrected by removing:
meta name="viewport" content="width=device-width, initial-scale=1.0"
from the head.
I don't know if this is the best solution, so if anyone has any additional input I'm all ears.
However at least it appears to display OK.