说你有这个:
html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}
<div class="box">Screen 1</div>
你会得到一些填充屏幕的东西,没有滚动条.但添加另一个:
<div class="box">Screen 1</div>
<div class="box">Screen 2</div>
您不仅可以获得垂直滚动条(预期),还可以获得轻微的水平滚动条.
我意识到你可以省略宽度,或者将其设置为宽度:100%,但我很好奇为什么会发生这种情况.是不是100vw应该是"100%的视口宽度"？
我正在开发我的网站的移动版本.我尽可能地使用媒体查询和CSS,但我也使用一些javascript,例如,将我的导航转换为较小设备上的折叠/展开列表以节省空间.
为了处理所有这些,我试图使用window.resize事件.这样可以在桌面浏览器调整大小时实现魔力,但是当我不期待它们时,我会在iPad/iPhone上调整大小.
在桌面浏览器上,如果我实际调整窗口大小,我只会收到调整大小事件.在移动浏览器上,当我更改方向(预期)时,我会收到调整大小事件,但是当我切换到展开/折叠某些内容时,我也会得到它.
这是一个简单的例子:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
$(".opener").click(function(){
$(".box").slideToggle();
});
$(window).resize(function(){
alert("resized");
});
});
</script>
</head>
<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>
单击桌面浏览器上的链接时,不会发出警报.点击iPhone/iPad上的链接,即可获得提醒.这是怎么回事？
我在测试模式下使用 Stripe 的 Checkout。我试图在 Stripe 中获取客户的 ID 以及他们在结账时提供的电子邮件以更新我的数据库。
我为 checkout.session.completed 设置了一个 webhook。如果我发送测试 webhook，则会填写 id，但不会填写 customer_email。
我想也许测试 webhook 不会传递该信息，所以我填写了结帐表格。我得到的 id 很好，但 customer_email 为空。
我猜我只是不明白与 Stripe 互动的正确方式。
// straight from Stripe's documentation
try {
$event = \Stripe\Webhook::constructEvent(
$payload, $sig_header, $endpoint_secret
);
} catch(\UnexpectedValueException $e) {
// Invalid payload
http_response_code(400);
exit();
} catch(\Stripe\Exception\SignatureVerificationException $e) {
// Invalid signature
http_response_code(400);
exit();
}
// Handle the checkout.session.completed event
if ($event->type == 'checkout.session.completed') {
$session = $event->data->object;
// Fulfill the purchase...
handle_checkout_session($session);
}
http_response_code(200);
// my …我正在尝试在开发人员工具中查看/编辑 :after 元素的样式。
如何找到::before与::after伪元素相关的规则？
我有一个人员搜索脚本，可以在您键入时显示建议。结果的结构大致如下：
<div id="peopleResults">
<div class="resultHolder">
<div data-userid="ABC123" class="person">
<div class="name">Last, First</div>
<div class="title">Job Title</div>
<a class="email" href="mailto:person@company.com">person@company.com</a><span class="phone">12345</span>
</div>
<!-- more people... -->
</div>
</div>
由于人员列表会在您键入时发生更改，因此到目前为止，我一直在使用 JQuery 的 live() 函数将单击事件自动绑定到所有 .person 元素。这是已弃用且不好的做法，因此我正在尝试更新代码。
我发现我可以使用类似的东西：
$('#peopleResults').on('click', '.person', function(){
// handle the click
})
但我想更多地了解如何在普通 JavaScript 中处理这个问题。我认为，当通过单击事件单击某个项目的子项时，该事件会在元素中“冒泡”，并且当它击中 .person 元素时我可以捕获它。请原谅草率的代码，但类似：
document.getElementById('peopleResults').addEventListener('click', function(e){
if(e.target.classList.contains('person')) {
// handle click
}
});
我过去做过类似的事情，但通常带有链接。（在这种情况下，.person 不能是链接，因为它包含电子邮件链接。）
所以在这种情况下它不起作用。如果我单击 .person 中的 .name，则目标是 .name。
这似乎是一些基本的东西，但我却没有想到。JavaScript 中处理这个问题的典型方法是什么？