相关疑难解决方法(0)
JavaScript窗口调整大小事件
如何挂钩浏览器窗口调整大小事件？
有一种jQuery方式可以监听resize事件,但我不想将它带入我的项目中,只需要这个要求.
推荐指数
解决办法
查看次数
CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？
我正在使用多个平板电脑设备 - 都是Android 和iOS.目前我对所有平板电脑都有以下分辨率变化.
- 1280 x 800
- 1280 x 768
1024 x 768(iPad显然)- iPad没有这个问题
应用基于设备方向的样式的最简单方法是使用以下语法使用媒体查询的方向.
@media all and (orientation:portrait)
{
/* My portrait based CSS here */
}
@media all and (orientation:landscape)
{
/* My landscape based CSS here */
}
这适用于所有平板电脑设备.但是,问题是,当设备处于纵向模式并且用户点击任何输入字段(例如搜索)时,弹出软键盘 - 这会减少网页的可见区域并迫使其在基于景观的CSS中呈现.在Android平板电脑设备上,它取决于键盘的高度.因此,最终网页看起来很糟糕.因此,我不能使用CSS3的方向媒体查询来根据方向应用样式(除非有更好的媒体查询到目标方向).这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/模仿这个 - 用于设备测试使用完整的测试页面 - http://jsfiddle.net/S5nYP/embedded/result/
以下是从演示页面获取的行为的屏幕截图.
那么,有没有替代方案来解决这个问题,如果基于CSS的原生解决方案不起作用,我对基于JavaScript的解决方案持开放态度.
我在http://davidbcalhoun.com/2010/dealing-with-device-orientation上找到了一个片段,建议在此基础上添加课程和目标.例如:
<html class="landscape">
<body>
<h1 class="landscape-only">Element Heading - Landscape</h1>
<h1 class="portrait-only">Element Heading - Portrait</h1>
<!-- .... more... ->
# CSS
.landscape .landscape-only …推荐指数
解决办法
查看次数
我可以使用jquery确定设备是处于纵向还是横向模式？
我想有条件地改变用户在我要创建的照片库网站上看到的内容,具体取决于用于查看网站的设备是纵向/垂直还是横向/水平模式/方向.这可能吗？
javascript jquery screen-orientation jquery-mobile landscape-portrait
推荐指数
解决办法
查看次数
jquery检测手机方向
我写了一些代码,用于提醒手机上的用户改变为横向,基本上是肖像.这很有效,但如果用户在横向开始,它显然没有显示,因为没有方向改变.有没有办法让你得到的方向？
$(window).on("orientationchange",function(){
if( (window.orientation == 90 && $( window ).width() < 780) || (window.orientation == -90 && $( window ).width() < 780) ) // Landscape
{
$('body').append('<div class="phoneLandscape"><h4>Sorry, this site is best viewed in Portrait Mode</h4></div>');
}
else // Portrait
{
$('.phoneLandscape').remove();
}
});
推荐指数
解决办法
查看次数
仅为横向模式设置视口
我正在完成我的网站，除了一件小事外，一切都完美无缺。当我使用我的 iPhone 时，纵向模式正是我想要的，问题是横向模式。我好像已经设计过了，但我不喜欢最终版本...所以我需要插入另一行代码，但我不知道该怎么做...
这是我拥有的现在
<meta name="viewport" content="width=device-width,initial-scale=1">
现在我需要一个只为风景模式。我希望这个 ^ 一直工作，除了横向模式。在横向模式下，我想要这个：<meta name="viewport" content="height=device-height,initial-scale=1">
我的问题是我怎么说这只能在横向模式下工作？
谢谢
推荐指数
解决办法
查看次数
Intersection Observer针对不同窗口大小进行微调
到目前为止，这是我的代码：
const mediaInViewport = document.querySelectorAll('.media');
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];
document.body.addEventListener('click', (event) => {
if (event.target.tagName === 'a') {
actLink.classList.remove('active');
actLink = links.find(link => event.target.href === link.href)
actLink.classList.add('active');
}
}, false)
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
const closestParent = entry.target.closest('section');
if (closestParent) {
actLink.classList.remove('active');
actLink = links.find(link =>
link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
)
actLink.classList.add('active');
}
}
});
}, {
threshold: 0
});
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // …推荐指数
解决办法
查看次数
是否有任何使用@HostListener 进行方向更改的窗口事件，就像我们使用 @HostListener("window:scroll", ['$event']) 进行滚动一样？
我想检测方向变化，检测我正在以纵向模式或横向模式查看我的应用程序。那么有没有像方向变化这样的事件，我可以在我的组件中的主机侦听器中传递来检测方向变化？
PS - 有些人说这是重复的问题。我不想要普通的 java 脚本方式，我想要角度方式来检测方向变化。
推荐指数
解决办法
查看次数