I have the following problem with a web page, when displayed on my mobile (iPhone 6).
Here is the whole HTML code, simplified and remade to show the issue and possibly let people try and reproduce it. The starting point of this code was some example from a tutorial provided by bootstrap quite a while ago.
<!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>
The problem appears with the line containing class='fb-like'. To make it easy to reproduce I have set a variable called PB. Let us say you put this code above in a file on your own server called test.php. When the link is http://yourserver.example.net/test.php it should fit on your mobile, the page width fits perfectly on the device. When it is http://yourserver.example.net/test.php?PB=1 , the page should not fit any more, it is about two centimeters wider than the device. I have only tried with an iPhone 6 and an iPod touch (4 inches). What should I do to make it fit and also keep the facebook-buttons?