html - 宽度太小时如何重写网页(仅保留文本)

我正在写a website page，我想要这样：

如果屏幕宽度太小，则说明您正在通过手机查看。我希望页面上只有文本（导航栏除外），没有背景图像，并且字体大小应进行调整以固定屏幕尺寸。

现在html代码具有许多类，因此我的想法之一是在通过手机浏览时禁用这些类（有很多）。

我的一些代码：

<section class="box">
   <img src="images/background2.jpg" class="img-responsive hidden-xs" alt="">
   <div class="carousel-caption text-background">
        <h1>Do you love to scuba dive? Are you looking for your next bid dive event?</h1>
        <h5>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
        multiple dives operated by experienced dive companies. All proceeds from these diving excursions will benefit the ABI Endowment Fund<a href="http://endowment.abi.org" target="_blank"> endowment.abi.org</a>
        Do something you love while supporting the ABI Endowment Fund. Get more information about ABI's upcoming dive excursions.</h5>
   </div>
</section>

最佳答案

使用移动设备时，可以使用php检测设备是移动设备还是台式机。您可以使用类似以下的方法来检测它是否为手机：

<?php
function isMobile() {
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
    $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
    $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
    if ($iphone || $android || $palmpre || $ipod || $berry == true) {
        return true;
    } else {
        return false;
    }
}
if (isMobile()===true) {
    echo "Device is Mobile";
}
?>

这只是为了检测设备是移动设备还是台式设备，如果是移动设备，则可以在if (isMobile()===true) {上放置用于移动设备的代码，或者可以包含用于移动设备内容的文件。希望这对您有所帮助！

关于html - 宽度太小时如何重写网页(仅保留文本)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22140037/