我创建了一个带有前一个和下一个按钮的旋转木马,它们始终可见.这些按钮具有悬停状态,它们变为蓝色.在触控设备(如iPad)上,悬停状态是粘性的,因此按下按钮后按钮会保持蓝色.我不希望这样.
我可以为每个按钮添加一个no-hover类ontouchend,并使我的CSS像这样:button:not(.no-hover):hover { background-color:
blue; }但这可能对性能非常不利,并且不能正确处理Chromebook Pixel(同时具有触摸屏和鼠标)等设备.
我可以添加一个touch类documentElement,并使我的CSS像这样:html:not(.touch) button:hover { background-color: blue;
}但这也不适用于同时具有触摸和鼠标的设备.
我更喜欢的是删除悬停状态ontouchend.但这似乎不太可能.聚焦另一个元素不会消除悬停状态.手动点击另一个元素,但我似乎无法在JavaScript中触发它.
我发现的所有解决方案似乎都不完美.有完美的解决方案吗？
有没有办法检测是否使用了手持浏览器(iOS/Android手机/平板电脑)？
我试过这个目标是在手持设备上的浏览器中制作一半宽的元素,但它没有什么区别.
width: 600px;
@media handheld { width: 300px; }
可以这样做,如果是这样的话怎么办？
编辑:从我使用的jmaes回答中的引用页面
@media only screen and (max-device-width: 480px).
我目前使用以下测试(取自Modernizr)来检测触摸支持:
function is_touch_device() {
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function(node) {
bool = node.offsetTop === 9;
});
}
return bool;
}
但有些设备是触摸和鼠标驱动的,所以我想要一个单独的功能来检测设备是否有鼠标支持.有什么好办法做这个检查？
最终我的意图是能够做到这些:
if(is_touch_device())
if(has_mouse_support())
if(is_touch_device() && has_mouse_support())
我正在设计一个移动网站,其中有一个部分可以从中下载壁纸.为了容纳许多用户,我希望能够根据屏幕分辨率下载壁纸.我想从JavaScript检测分辨率并显示适当的壁纸.
这是我在网上找到并试过xD失败的内容:
width = window.innerWidth || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;
对于我的SGS3,其分辨率为720x1280,我得到了360x567.
我该如何从JavaScript中发现手机的分辨率？
如果我为div设置以下css:
-webkit-overflow-scrolling: touch;
我用来隐藏滚动条的自定义css被覆盖,默认滚动条出现在iPad上.
这是我用来隐藏滚动条的CSS:
::-webkit-scrollbar {
width: 12px;
opacity:0;
}
::-webkit-scrollbar-track {
opacity:0;
}
::-webkit-scrollbar-thumb {
opacity:0;
}
如果您知道在溢出滚动设置为触摸时覆盖默认滚动条的任何解决方案,我将非常感谢您的帮助.
谢谢!
我可以在iPhone上检测到iOS 13，但在iPad OS 13中navigator.platform是MacIntel。因此，无法使用以下代码识别iPad，但它在iPhone上可以完美运行。
if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
return version;
}
当我们要求使用iPad上的浏览器访问移动网站时，它将navigator.platform返回iPad，并且可以完美运行。
谁能建议使用Javascript 识别在iOS 13及更高版本上运行的iPad的方法？
我需要:hover为触摸设备应用一些替代方案.CSS中是否有任何解决方案来检测触摸设备？
有没有Media Query检测触控设备的选项？