gpt4 book ai didi

html - 分辨率太高时检测手机

转载 作者:太空宇宙 更新时间:2023-11-04 08:04:59 25 4
gpt4 key购买 nike

我正在尝试让我的网页响应。然而,我知道媒体查询,当使用像三星 Galaxy Note 4 这样具有非常高分辨率的设备时,网页最终看起来很像桌面版。

我知道有一种方法可以做到这一点,因为当我尝试访问像阿里巴巴这样的知名响应式网站时,它会将我重定向到它的 m.alibaba 版本。这里的限定符是什么?因为显然这不是解决方案。

感谢您抽出宝贵时间。

最佳答案

您可以使用 -webkit-min-device-pixel-ratio 查看实际的像素比在媒体查询中。例如,Galaxy S4 及以后的版本有一个 -webkit-device-pixel-ratio4 ,而 S3 的比率仅为 3 .基于此的定位将使您能够在每台设备上呈现不同的移动 View 。

这是一个仅针对 S3 的示例:

@media screen 
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}

您可以在 this CSS Tricks page 上找到设备及其相关媒体查询的完整列表。 .

记得包含一个 META tag在你的<head>允许缩放的部分:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 

您所说的实际重定向无法通过 CSS 处理,通常通过 JavaScript 处理。

这可以(粗略地)通过检查 window.screen.width 来完成:

if (window.screen.width < 1000) {
window.location = 'm.mysite.com';
}

虽然检查用户代理更安全:

var isMobile = function() {
console.log("Navigator: " + navigator.userAgent);
return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);
};

希望对您有所帮助! :)

关于html - 分辨率太高时检测手机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46718383/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com