我想在我的响应式网站中使用 LinkedIn 公司简介插件。我为桌面 View 添加了 data-width="300"，现在我想为平板电脑和移动设备设置一些不同的宽度值。
任何人都可以帮助我如何为不同的 View 在 data-width 中设置不同的值。
最佳答案
这是您可以执行的操作的示例:
<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 来完成，但它有点棘手。
关于javascript - 为 Linkedin 公司简介插件设置响应宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29793239/