个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
有没有办法将元素(尤其是右上角)固定到 chrome mobile 中的视觉视口(viewport)？
我们想要显示网站访问者可以放大和缩小的非常大的图像。观众需要能够看到整个画面，然后瞄准小区域进行检查。我们将加载比可用屏幕宽得多的图像。比如说从 1500 到 6000 像素宽。
除了上面的内容，我们还需要在左上角和右上角固定导航元素。
在 Webkit/Safari 上我们得到了我们想要的行为。
Chrome/Android 移动版(初始加载):
Chrome/Android 移动设备(一直缩小):
移动设备上的 Chrome 似乎想要将屏幕右上角的 div 固定到布局视口(viewport)。也就是说，绿色的固定右上角的 div 不在屏幕上，直到您一直放大到整个图片。
这些规范似乎表明这是 Chrome 的设计。
设置 minimum-scale=1 从表面上看似乎可以解决这个问题，但它会禁用放大/缩小，这使得这不是解决方案。
是否有解决方案让 Chrome 的行为与 Webkit/Safari 相同？涉及 Javascript 的解决方案可能是可以接受的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing fixed width headers on mobile</title>
</head>
<style>
.tl {
position:fixed;
top:0;
left:0;
background-color:red;
}
.tr {
position:fixed;
top:0;
right:0;
background-color:green;
}
body img {
margin-top:110px;
}
</style>
<body>
<div class="tl">Fixed top left</div>
<div class="tr">Fixed top right</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/In_the_Conservatory.jpg/1280px-In_the_Conservatory.jpg" />
</body>
</html>
最佳答案
最干净的解决方案是将图像放在 width: 100%; 的元素中。溢出:自动；
对于父元素的高度，您可以使用 calc(100% - X)，其中 X 是导航栏的高度(假设您希望图像占据整个屏幕，除非缩放出)。
完整示例见下文。
编辑:我在这个代码笔的帮助下更新了下面的答案[ https://codepen.io/techslides/pen/zowLd]用于在 Canvas 元素内缩放和平移。您还可以添加一个事件监听器来检查窗口大小调整并根据需要重绘 Canvas 。
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 20;
var canvasimage = new Image;
window.onload = function() {
var ctx = canvas.getContext('2d');
trackTransforms(ctx);
function redraw() {
// Clear the entire canvas
var p1 = ctx.transformedPoint(0, 0);
var p2 = ctx.transformedPoint(canvas.width, canvas.height);
ctx.clearRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.drawImage(canvasimage, 0, 0);
}
redraw();
var lastX = canvas.width / 2,
lastY = canvas.height / 2;
var dragStart, dragged;
canvas.addEventListener('mousedown', function(evt) {
document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
dragStart = ctx.transformedPoint(lastX, lastY);
dragged = false;
}, false);
canvas.addEventListener('mousemove', function(evt) {
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
dragged = true;
if (dragStart) {
var pt = ctx.transformedPoint(lastX, lastY);
ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);
redraw();
}
}, false);
canvas.addEventListener('mouseup', function(evt) {
dragStart = null;
if (!dragged) zoom(evt.shiftKey ? -1 : 1);
}, false);
var scaleFactor = 1.1;
var zoom = function(clicks) {
var pt = ctx.transformedPoint(lastX, lastY);
ctx.translate(pt.x, pt.y);
var factor = Math.pow(scaleFactor, clicks);
ctx.scale(factor, factor);
ctx.translate(-pt.x, -pt.y);
redraw();
}
var handleScroll = function(evt) {
var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
if (delta) zoom(delta);
return evt.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll', handleScroll, false);
canvas.addEventListener('mousewheel', handleScroll, false);
};
canvasimage.src = '/image/ITUHK.png';
// Adds ctx.getTransform() - returns an SVGMatrix
// Adds ctx.transformedPoint(x,y) - returns an SVGPoint
function trackTransforms(ctx) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
var xform = svg.createSVGMatrix();
ctx.getTransform = function() {
return xform;
};
var savedTransforms = [];
var save = ctx.save;
ctx.save = function() {
savedTransforms.push(xform.translate(0, 0));
return save.call(ctx);
};
var restore = ctx.restore;
ctx.restore = function() {
xform = savedTransforms.pop();
return restore.call(ctx);
};
var scale = ctx.scale;
ctx.scale = function(sx, sy) {
xform = xform.scaleNonUniform(sx, sy);
return scale.call(ctx, sx, sy);
};
var rotate = ctx.rotate;
ctx.rotate = function(radians) {
xform = xform.rotate(radians * 180 / Math.PI);
return rotate.call(ctx, radians);
};
var translate = ctx.translate;
ctx.translate = function(dx, dy) {
xform = xform.translate(dx, dy);
return translate.call(ctx, dx, dy);
};
var transform = ctx.transform;
ctx.transform = function(a, b, c, d, e, f) {
var m2 = svg.createSVGMatrix();
m2.a = a;
m2.b = b;
m2.c = c;
m2.d = d;
m2.e = e;
m2.f = f;
xform = xform.multiply(m2);
return transform.call(ctx, a, b, c, d, e, f);
};
var setTransform = ctx.setTransform;
ctx.setTransform = function(a, b, c, d, e, f) {
xform.a = a;
xform.b = b;
xform.c = c;
xform.d = d;
xform.e = e;
xform.f = f;
return setTransform.call(ctx, a, b, c, d, e, f);
};
var pt = svg.createSVGPoint();
ctx.transformedPoint = function(x, y) {
pt.x = x;
pt.y = y;
return pt.matrixTransform(xform.inverse());
}
}body {
margin: 0;
padding: 0;
overflow: hidden;
}
.wide {
width: 200vw;
}
.nav {
width: 100%;
height: 20px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.left-nav {
background-color: red;
}
.right-nav {
float: right;
background-color: green;
}<div class="nav clearfix">
<span class="left-nav">Top Left</span>
<span class="right-nav">Top Right</span>
</div>
<canvas>
</canvas>关于android - 将元素(尤其是右上角)固定到 chrome mobile 中的视觉视口(viewport)，内容非常广泛？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57187611/
25
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！