2015-03-18 4 views
3

То, что я ищу, довольно просто, чтобы автоматически перенаправить пользователя на другой URL-адрес, когда ширина экрана или окна меньше 950 пикселей.URL-адрес перенаправления на основе ширины экрана

Я не хочу использовать «обновить», поскольку это не рекомендуется, и я не хочу использовать «Пользовательский агент», поскольку он кажется мне менее надежным в долгосрочной перспективе, и я не хочу чтобы усовершенствовать это.

Это скрипт я вижу предложил везде для этой цели, но по какой-то причине он не делает ничего:

<script type="text/javascript"> 
    <!-- 
    if (screen.width <= 950) { 
    window.location = "https://www.google.com/"; 
    } 
    //--> 
</script> 

Я также попытался его все это варианты без успеха:

window.location 
document.location 
window.location.href 
document.location.href 

Я также попытался разместить его как первое, что после заголовка и даже до Doctype. Ничего не происходит ...

+0

ли вы попробовать location.href = "your_url"; ? – dnmh

+0

Какова ценность screen.width? Иногда есть задержка на JS? Не готов, .. – Finduilas

+0

@ dnmh Да, я попробовал document.location.href ... Ничего не происходит. –

ответ

1

Я отвечаю на свой вопрос, поскольку недавно нашел более удовлетворительное решение, которое было предоставлено @Finduilas.

Это решение не только перенаправляет вас в обычных условиях, но и перенаправляет вас назад и вперед при изменении размера окна.

Еще лучше! Он будет перенаправлять вас назад и вперед в мобильных устройствах при переключении с пейзажа на портрет и наоборот.

<script type="text/javascript"> 
    $(window).on('load resize',function(){ 
     if($(window).width() < 950){ 
      window.location = "https://www.google.com" 
     } 
    }); 
</script> 
+0

Это не работает в обратном направлении, когда я делаю экран меньшим, он попадает в адрес window.location. Но он не возвращается к адресу orignal – Coolen

+0

, если вы не используете тот же скрипт на другом веб-сайте, изменяя < to > – Coolen

+0

Конечно, вам нужно использовать похожий скрипт на другом веб-сайте. –

2

Вы можете лучше использовать JQuery для этого ...

// Returns width of browser viewport 
$(window).width(); 

См: http://api.jquery.com/width/

Пример:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    if($(window).width() <= 950) { 
window.location = "https://www.google.com/"; 
} 
}); 
</script> 
</head> 
<body> 
<p>Website</p> 
</body> 
</html> 
+0

Если '$ (window) .width(); 'работает, тогда я не понимаю, почему' screen.width' не будет работать. – callback

+1

Потому что вам нужно загрузить его после $ (document) .ready()? Иногда JS быстрее, чем браузер, он возвращает 0 вместо правильного значения. – Finduilas

+0

@Finduilas Это не работает, но я ничего не знаю о JavaScript, возможно, я не помещаю это в нужное место , можете ли вы представить полный пример, чтобы я понял, как это сделать в контексте? –

2

Если вы должны использовать Javascript, попробуйте следующие:

<script type="text/javascript"> 
    function redirect() { 
    if (screen.width <= 950) { 
     window.location = "https://www.google.com/"; 
    } 

и в вашем теле добавить:

<body onload="setTimeout('redirect()', 300)"> 

Это будет перенаправлять пользователя через 300 мс при загрузке страницы, таким образом, вы должны быть уверены, что width экрана доступно.

+0

Большое спасибо, я сделал именно то, что вы предложили, но он тоже не работает. –

0
<script type="text/javascript"> 
    <!-- 
    if (screen.width <= 950) { 
    window.location = "https://www.google.com/"; 
    } 
    //--> 
</script> 

<!-- you forgot to add window.location.replace("https://www.google.com/"); and yours is a little wrong--> 
<script type="text/javascript"> 
    <!-- 
    if (screen.width <= 950) { 
    window.location.replace("https://www.google.com/"); 
    } 
    //--> 
</script> 
Смежные вопросы