javascript - Javascript移动网站

javascript - Javascript移动网站,第1张

我使用以下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。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复