Question

我需要根据iPad加载时的方向进行HTML REDIRECT。

所以我创建了两个网站。一个常规：用于iPad水平/ PC / macbook和另一个IPHONE：用于iphone-horizontal / iphone-vertical / ipad-vertical

我想基于设备进行重定向 - 这是常规但非常具体的需求是我希望iPad只在水平时重定向到min网站，如果在垂直时加载它应该到IPHONE网站。当iPad旋转时，我不需要改变网站。

很抱歉，如果此信息隐藏在另一个问题中，但我找不到我需要的确切答案。

非常感谢任何回复

Answer 1

您可以尝试收听deviceorientation事件。

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

Answer 2

您可以按屏幕大小而非设备重定向，通过屏幕分辨率定位每个特定设备。

JavaScript的：

var
Responsive = {

maxPhoneWidth: 775,

maxTabletWidth: 925,


//REDIRECT BASED ON CONFIGURABLE MAX WIDTH THRESHOLD

maxWidthRedirect: 
function
(maxWidth, url) {

var
viewport = 
this
.getWindowSize();



//ADD EXCLUSION IN HASH IN CASE DESKTOP VIEWING IS INTENDED

if
(window.location.hash != 
'#desktop'
&& viewport.width < maxWidth)

window.location.href = url;

},



//REDIRECT BASED ON RECOMMENDED PHONE WIDTH THRESHOLD

mobileRedirect: 
function
(url) {

this
.maxWidthRedirect(this
.
maxPhoneWidth, url);

},



//REDIRECT BASED ON RECOMMENDED TABLET WIDTH THRESHOLD

tabletRedirect: 
function
(url) {

this
.maxWidthRedirect(this.maxTabletWidth, url);

},



//DETERMINE CROSS-BROWSER SCREEN SIZE

getWindowSize: 
function
() {

var
w = window,

d = document,

e = d.documentElement,

g = d.getElementsByTagName(
'body'
)[0],

x = w.innerWidth || e.clientWidth || g.clientWidth,

y = w.innerHeight || e.clientHeight || g.clientHeight;


return
{ width: x, height: y };

}
};

HTML：

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- REDIRECT USERS TO MOBILE SITE IF LESS THAN 775PX -->    
<script src="/Scripts/Responsive.js"></script>

<script>Responsive.maxWidthRedirect(775, 'http://example.com');</script>

</head>

<body>
//your code goes here
</body>

</html>

请参阅：http://lists.w3.org/Archives/Public/ietf-http-wg/2014AprJun/1212.html

iPad重定向基于方向

2 个答案: