I'm using the normal code:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; }
But on my iPhone5c/iOS8 the webpage has a width of 320px of the full screen width, not the 300px of the WKWebview. What is that?
Related
Im having a little trouble with Firefox and perspectiveOrign. What i want is the origin to be controlled by mousemovement. So i calculate the percentages for origin, and set them like:
document.querySelector('parent').style.perspectiveOrigin = x% y%.
Logging the the value shows that perspectiveOrigin HAS changed but the interface just dosnt follow... or is very very very jaggy. I works like a charm in chrome and safari.
Is there something special i need to do to make Firefox update the UI with the values that it actually already has.
I made a little example here. the x/y percentages for origin is generated randomly onclick. I chrome - it will follow no matter how fast you are clicking, i Firefox - it follows if you click very slowly, but stops updating if you are clicking too fast.
(Im using Firefox Developer Ed. version: 104)
----After having posted this I ran the code-snippet below in the very same Firefox - and it works like it should. But running the EXACT same code from VSCode with LiveServer gives me the problem right away... Is there some polyfill active in the code runner - if so what polyfill?
<!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>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
display: inline-block;
border: 1px solid black;
perspective: 10px;
perspective-origin: 50% 50%;
width: 600px;
height: 500px;
}
div {
border: 1px solid red;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
inset: 0;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container" onclick="changeOrigin()">
<div class="layer1" style="transform: translateZ(-5px)"></div>
<div class="layer2" style="transform: translateZ(-15px)"></div>
<div class="layer3" style="transform: translateZ(-25px)"></div>
</div>
<script>
const myDiv = document.querySelector(".container");
function changeOrigin() {
console.log("in change origin");
x = Math.random() * 100 + "%";
y = Math.random() * 100 + "%";
myDiv.style.perspectiveOrigin = `${x} ${y}`;
}
</script>
</body>
</html>
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc
I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.