为 Linkedin 公司简介插件设置响应宽度

Question

我想在我的响应式网站中使用 LinkedIn 公司简介插件。我为桌面视图添加了 data-width="300"，现在我想为平板电脑和移动设备设置一些不同的宽度值。

任何人都可以帮助我如何在 data-width 中为不同的视图设置不同的值。

Answer 1

这是您可以执行的操作的示例：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test</title>
        <style>
            @media screen and (max-width:760px) {
                #linkedinXsSmall {display: block;}
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: none;}  
            }

            @media screen and (min-width:761px) and (max-width:960px) {
                #linkedinXsSmall {display: none;}
                #linkedinSmall {display: block;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: none;} 
            }

            @media screen and (min-width:961px) and (max-width:1280px) {
                #linkedinXsSmall {display: none;} 
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: block;} 
                #linkedinDesktop {display: none;} 
            }
            /* apply to all larger devices */
            @media screen and (min-width:1281px) {
                #linkedinXsSmall {display: none;} 
                #linkedinSmall {display: none;} 
                #linkedinMedium {display: none;} 
                #linkedinDesktop {display: block;} 
            }
        </style>
    </head>
    <body>
        <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>

        <div id="linkedinXsSmall">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="200px"></script>
        </div>

        <div id="linkedinSmall">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="400px"></script>
        </div>

        <div id="linkedinMedium">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="600px"></script>
        </div>

        <div id="linkedinDesktop">
            <script type="IN/CompanyProfile" data-id="1337" data-format="inline" data-width="1000px"></script>
        </div>
    </body>
</html>

另外别忘了使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在您的页面中，以便内容在高间距设备上适当缩放。

我之所以选择这个解决方案，是因为它可以快速设置并且易于理解。在我看来，也应该可以使用 javascript 来初始化数据，但它有点棘手。

为 Linkedin 公司简介插件设置响应宽度

Set Responsive Width For Linkedin Company Profile plugin

javascript

css

responsive-design

linkedin