javascript - Javascript移动网站

我使用以下javascript来检测网站是否在移动设备上查看，它是否完美地作为重定向（参见示例1）;

但是，是否可以修改它以便在满足相同条件时修改元素或类的字体大小（原始字体大小包含在外部样式表中），即检测到iDevice

 //original code: (Javascript)

 // iDevice
var iDevice = {

// Android
Android: function() {
return navigator.userAgent.match(/Android/i);
},

// Blackberry
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},

// Apple
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},

// Opera Browser
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},

// Windows Mobile
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},

// Function: (iDevice)
any: function(){
return (iDevice.Android() || iDevice.BlackBerry() || iDevice.iOS() || iDevice.Opera() || iDevice.Windows());
    }
};


<!-- Working HTML -->

{
if( iDevice.any() )
window.location = "http://www.stackoverflow.com";
}

最佳答案：

2 个答案:

答案 0 :(得分：0)

一种可能的解决方案是修改JavaScript，以便它根据设备代理向HTML中的“body”元素添加一个或多个自定义类。然后，在你的CSS中，你可以这样做：

.header {
    /* default font size */
}

.android .header,
.iphone .header
.mobile .header {
    /* custom font size */
}

但是，更好的解决方案可能是forgo user agent detection，而是使用media queries根据用户用来查看您网站的设备的实际宽度来制作您的网站responsive。

答案 1 :(得分：0)

您的代码无法在您未明确枚举的任何设备上使用。例如，为什么不支持Firefox OS？

当然，您可以尝试枚举有史以来生成的每个移动设备（并继续这样做以保持代码适用于新设备）并更改检测到的移动设备（您知道的）的字体大小，但它会是更好地使用responsive web design来做这类事情。

您可以使用以下框架：

• Bootstrap
• Foundation

或许多其他人，或者如果您不想使用这些框架，请自行使用CSS media queries。

请参阅：关于CSS-Tricks的Media Queries for Standard Devices。