本文主要是介绍js实现优酷视频手机电脑自适应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
大致思路就是先使用js判断访问页面的是手机还是PC端,然后对应显示不同的大小
js判断手机还是PC是使用的这位的源码《出处》
效果图：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><meta name="description" content=""><meta name="author" content=""><link rel="icon" href="favicon.ico"><!-- Bootstrap core CSS --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="css/jumbotron.css" rel="stylesheet"><!-- Just for debugging purposes. Don't actually copy these 2 lines! --><!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--><script src="js/ie-emulation-modes-warning.js"></script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><!-- Main jumbotron for a primary marketing message or call to action --><div class="jumbotron"><div class="container">
<script type="text/javascript">var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}
if(flag)
{
document.write("<iframe height="+window.screen.height*0.6+" width=\"100%\" src=\"http://player.youku.com/embed/XMTQxODA4MjIxMg==\" frameborder=0 allowfullscreen></iframe>");
}
else
{
document.write("<script type=\"text/javascript\">function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}};window.onload = function () {setIframeHeight(document.getElementById('external-frame'));};"+"<\/script><iframe src=\"http://player.youku.com/embed/XMTQxODA4MjIxMg==\" frameborder=\"0\" scrolling=\"no\" id=\"external-frame\" οnlοad=\"setIframeHeight(this)\"></iframe>");
}
</script></div>
</div><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="js/ie10-viewport-bug-workaround.js"></script></body>
</html>
这篇关于js实现优酷视频手机电脑自适应的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
