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

我正在尝试在页面顶部添加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>

所以它在

<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>

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”；
}否则{
img.src=”https://drive.google.com/uc?export=view&id=0B2VHnnIsISjHdWRLVk9zS2VuUFk";
img.style.width=“1904px”；
img.style.height=“403px”；
}
文件.正文.附件（img）；

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

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=宽度；
img.style.height=高度；
}
否则{
img.src=src；
img.style.width=宽度；
img.style.height=高度；
}
文件.正文.附件（img）；

---

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

您不能在JavaScript中编写HTML标记。请参阅@Yusaf Khaliq answer。我如何设置高度和宽度？我是否还添加到图像的链接？srcchange

img.src=“link to image here”

；和

image.style.width=“100px”

两个图像都是相同的问题是，当我在pc上设置433的高度时，它看起来很好，但当使用移动浏览器时，它太大了，所以这就是为什么我试图检测它是否是移动浏览器，如果在exmaple中使用正确的高度，如果浏览器是移动的，它将显示移动图像，如果计算机是计算机的图像。

    <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>

   <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>