Question

我的手机（iPhone 6）上显示网页时出现以下问题。

以下是整个HTML代码，简化并重新制作以显示问题，并可能让人们尝试重现它。这段代码的起点是很久以前bootstrap提供的教程中的一些例子。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>A good title</title> 
<meta name="description" content="Presentation of something."> 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.4/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.container{background-color:rgb(165,230,138); padding:35px;}
.span12 h1{color:#FE6E4C; font-weight:bold; padding:5px;}
h3 {margin: 10px 0 10px 0;}
img.screenSht {width:320px; height:480px;}
      .nav_container {
        margin: 0 auto;
        max-width: 1200px;
      }
      .nav_container > hr {
        margin: 60px 0;
      }

      .navbar .navbar-inner {
        padding: 0;
      }
      .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;
      }
      .navbar .nav li {
        display: table-cell;
        width: 1%;
        float: none;
      }
      .navbar .nav li a {
        font-weight: bold;
        text-align: center;
        border-left: 1px solid rgba(255,255,255,.75);
        border-right: 1px solid rgba(0,0,0,.1);
      }
      .navbar .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
      }
      .navbar .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
      }


      .tp-bt-margin {margin-top:20px;margin-bottom:20px;}
      /*.fb-like-attr {}*/

      /*.normal-width {width: 100%;};*/

       ILB {font-size:1.0em;}
       @media (max-width: 650px) {
       ILB {font-size:0.9em;}
       }
</style>
</head>

<?php
$ThePath=$_SERVER['PHP_SELF'];

function setIntrod()
{/* Beginning of setIntrod */
echo "Some great contents and little things.<br/>";
echo "And even more good things and just a few bad things .... and more and more nonsense.<br/>";
echo "When I find myself in times of trouble Mother Mary comes to me Speaking words of wisdom, let it be And in my hour of darkness She is standing right in front of me Speaking words of wisdom, let it be Oh, let it be, let it be, let it be, let it be Whisper words of wisdom, let it be.<br/>";
echo "And more and even more of whatever to fill an example page.<br/>";
echo "And more-more and even more-more of whatever to fill an example page.<br/>";
echo "And more-more-more and even more-more-more of whatever to fill an example page.<br/>";
}/* End of setIntrod */
?>

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="container">
</br>

<div class="row">
<div class='span12'>
<p><? setIntrod() ?></p>
</div>
</div>
<br/>

<?php
$LikeSuggestMsg="If you find these nonsense interesting, please click the LIKE or SHARE button:";

printf("<div class=\"container-fluid\">\n");
if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")!==false)||
    (strpos($_SERVER['HTTP_USER_AGENT'],"Android")!==false)) {
    printf("<div class='row'>\n");
    printf("<div class='col-xs-4 col-sm-4 tp-bt-margin'>\n");
    if ($_GET['PB']) {
        printf("<div class='fb-like' data-href='http://www.sofisfun.net%s' data-send='true' data-width='230' data-show-faces='true'>\n",
                $ThePath);
        printf("</div>\n");
    }
    printf("</div>\n");
    printf("</div>\n");
}

printf("</div><br/>\n");

?>

</div>

</body>
</html>

问题出现在包含 class =＆＃39; fb-like＆＃39; 的行中。为了便于重现，我设置了一个名为 PB 的变量。我们假设您将上面的代码放在您自己的服务器上名为test.php的文件中。当链接为http://yourserver.example.net/test.php时，它应该适合您的手机，页面宽度完全适合设备。当它是http://yourserver.example.net/test.php?PB=1时，页面不再适合，它比设备宽约2厘米。我只试过iPhone 6和iPod touch（4英寸）。我该怎么做才能使它适合并保留facebook按钮？

网页/手机显示。宽度不合适

0 个答案: