Question

我正在尝试将社交网络小部件的div添加到我网站上的页脚末尾。代码在我的桌面上运行，但是当我在ipad，iphone和Windows手机上测试时，内容对齐方式会发生变化。这是代码：

＆＃13;

    <div style="background-color: #1E2629;">
        <div class="container">
            <div class="row text-center">
                <div>
                    <ul class="list-inline">
                        <li>
                            <div class="fb-like" style="overflow:hidden;" data-href="https://www.facebook.com/WebsitePage" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
                        </li>
                        <li>
                            <div>
                                <a href="https://twitter.com/WebsitePage" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @CardInbox</a>
                                <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
                            </div>
                        </li>
                        <li>
                            <div>
                                <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
                                <script type="IN/FollowCompany" data-id="111111">
                                </script>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 1

为每个设备屏幕尺寸添加媒体查询

/* Ipad Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  /* your css code 
  .container {} */
}


/* iPhone 4/4s Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* your css code 
  .container {} */
}

/*5/5S */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

Windows手机有不同的屏幕尺寸。所以相应地配置。

修复<div>内容的对齐方式

1 个答案: