如何为移动和桌面浏览器创建两个不同的图像？

Question

我正在尝试在页面顶部添加javascript，如果它检测到移动浏览器，那么我的html代码将使用相应的html代码和图像高度和宽度设置。

<script type="text/javascript">
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
    <img src="https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk" alt="" style="width:1904px;height:328px;">
  else
    <img src="https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk" alt="" style="width:1904px;height:528px;">
</script>

我不确定为什么它不起作用？

我如何在完整的javascript中进行此操作

var img = document.createElement("img");
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  img.src = "http://home.bt.com/images/the-iphone-7-and-7-plus-which-bt-mobile-plan-is-right-for-me-136409622203503901-160915131847.jpg";
  img.style.width = "648px";
  img.style.height = "365px";
} else {
  img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Desktop_computer_clipart_-_Yellow_theme.svg/281px-Desktop_computer_clipart_-_Yellow_theme.svg.png";
  img.style.width = "281px";
  img.style.height = "203px";
}
document.body.appendChild(img);

所以它在

<script type="text/javascript">

一些代码

喜欢这个完整的代码，所以我可以将它添加到我的HTML代码

已修改新

这是正确的吗？

    <script type="text/javascript">
     var img = document.createElement("img");
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  img.src = "https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk";
  img.style.width = "1904px";
  img.style.height = "365px";
} else {
  img.src = "https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk";
  img.style.width = "1904px";
  img.style.height = "403px";
}
document.body.appendChild(img);

        </script>

Answer 1

如果我理解正确，您希望显示2张图片中的1张，具体取决于用户是在手机还是计算机上。 （顺便说一句，我还没有测试过您的测试功能）

   <script type="text/javascript">
    var img = document.createElement("img");
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    img.src = src;
    img.style.width = width;
    img.style.height = height;
    }
    else{
    img.src = src;
    img.style.width = width;
    img.style.height = height;
    }
document.body.appendChild(img);
    </script>

首先，您可以创建图像节点，设置src高度和宽度，然后附加到正文。还有空间来清理我在我的例子中使用的代码。在if else块之外设置样式宽度和高度，例如