Display another page when viewed from mobile

问题

I have two web pages: mobile.html with mobile.css and desktop.html with desktop.css.

How can I make a redirect to the mobile one (the default page is desktop.html) if screen size is less than 12″.

回答1:

This is not recommended the best way is to use media queries to make your site responsive. By adding the class and detecting the browser width change.

<div class=" mobilehidden">
       <p>This text is hidden in mobile</p>
</div>

Now in Css put this line

@media only screen and (max-width: 500px){
.mobilehidden{
      display = none;
}
}

if you want to do this then you can use JavaScript for this. You can also use php ,css but JavaScript is easier. Simply use this inside script tag

if (screen.width <= 700) {
     document.location = "samplepage.html";
}

If you are using bootstrap there is a class for this

.visible-xs-* 
.visible-sm-*

The mentioned above sm is for tablets whereas xs is for mobile.

回答2:

You can accomplish this with PHP, using a lightweight class such as Mobile Detect. Once downloaded and added to the server in the root of your website, you can then use this code to detect if the device is a mobile and set the location to the url of your mobile site:

<?php 
/* Change path info depending on your file locations */
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

if($detect->isMobile()) {
    header('Location: http://mobile.example1.com/');
    exit;
}
?>

Other devices can be detected and further examples can be found here

回答3:

You dont have to change the page but just use bootstrap for making page responsive i hope you know bootstrap if you don't see learning tutorial in youtube.

来源：https://stackoverflow.com/questions/45212955/display-another-page-when-viewed-from-mobile

标签

html

web

responsive-design