Menu
What I'm looking for is quite simply, a way to automatically redirect the user to a different URL when the screen or window width is less then 950px.
I don't want to use "refresh" as it's not recommended, and I don't do want to use "User Agent" either as it seams to me less reliable in the long term and I don't want to be concerned with updating this.
This is the Script I see suggested everywhere for this purpose but for some reason it doesn't do anything:
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
I've also tried it with all this variants with no success:
window.location
document.location
window.location.href
document.location.href
I've also tried placing it as the first thing after Head tag and even before Doctype. Nothing happens...
375
Redirects allow you to forward the visitors of a specific URL to another page of your website. In Site Tools, you can add redirects by going to Domain > Redirects. Choose the desired domain, fill in the URL you want to redirect to another and add the URL of the new page destination. When ready, click Create.
To redirect from an HTML page, use the META Tag. With this, use the http-equiv attribute to provide an HTTP header for the value of the content attribute. The value of the content is the number of seconds; you want the page to redirect after.
A redirect is when a web page is visited at a certain URL, it changes to a different URL. For instance, a person visits “website.com/page-a” in their browser and they are redirected to “website.com/page-b” instead.
I'm answering my own question as I have recently found a more satisfying solution then the one provided by @Finduilas.
This solution not only redirects you in normal circumstances, it will also redirect you back and forth as you resize your window.
Even better! It will redirect you back and forth in mobile devices as you switch from landscape to portrait and vice-versa.
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>
If you have to use Javascript, try the following:
<script type="text/javascript">
function redirect() {
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
and in your body add :
<body onload="setTimeout('redirect()', 300)">
This will redirect the user after 300 ms when the page is loaded, this way you are making sure that the width of the screen is available.
27
You can better use JQUERY for this...
// Returns width of browser viewport
$( window ).width();
See: http://api.jquery.com/width/
Example:
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
