当宽度太小时如何重写网页，（只剩下文本）答案

【问题标题】：How to rewrite web pages, (only text left) when width is too small当宽度太小时如何重写网页，（只剩下文本）
【发布时间】：2014-03-03 06:25:16
【问题描述】：

我正在写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>

【问题讨论】：

标签： html css twitter-bootstrap mobile responsive-design

【解决方案1】：

当您使用移动设备时，您可以使用 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) { 您可以将移动代码放在那里，或者您可以包含移动内容的文件。希望这对您有所帮助！

【讨论】：

【解决方案2】：

col-xs 适用于小型设备，试试这些行，

 <section class="box">
   <div class="container">
       <div class="col-xs-5">
     you are viewing via mobile phone.
       </div>
    </div>

   <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>

【讨论】：