Javascript 在移动设备上的容器中，单击时在任意位置显示单词

我昨天问了，被告知要问一个新的，以获得精确的答案

单击按钮时，“我的代码”会在页面上显示文字

它工作得很好，可以把它装在一个容器里吗

因为我希望这只显示在手机上，当我缩小浏览器页面时，会有一个巨大的滚动条，所有的单词都不会显示在窗口中

为了尝试，我试着把它放在一个300x300px的盒子里，但单词到处都是。是否可以使用引导网格或任何媒体查询，或者像我对任何容器所做的那样？还是另一个javascript规则

再次感谢

var单词=[
“你好”，
“不”，
“嗨”，
“香蕉”，
“苹果”
];
可见var=0；
文件。查询选择器（“表格”）。添加的文本列表器（“提交”，功能（e）{
e、 预防默认值（）；
var fullWidth=window.innerWidth；
var fullHeight=window.innerHeight；
var elem=document.createElement（“div”）；
elem.textContent=文字[可见]；
elem.style.position=“绝对”；
elem.style.left=Math.round（Math.random（）*fullWidth）+“px”；
elem.style.top=Math.round（Math.random（）*全高）+“px”；
文件.正文.附件（elem）；
可见++；
});
我对您的代码做了一点修改，这样应该可以工作


var words=['Hello'、'No'、'Hi'、'Banana'、'Apple']；
可见var=0；
var container=document.getElementById（“容器”）；
var containerWidth=container.offsetWidth；
var containerHeight=container.offsetHeight；
文件。查询选择器（“表格”）。添加的文本列表器（“提交”，功能（e）{
e、 预防默认值（）；
var elem=document.createElement（“div”）；
elem.className=“elem”；
elem.textContent=文字[可见]；
document.body.appendChild（elem）；//获取div大小
var left=Math.round（Math.random（）*containerWidth）；
var maxRight=容器宽度-（左+元素偏移网络宽度+5）；
if（maxRight<0）{
left-=Math.abs（maxRight）；
}
var top=Math.round（Math.random（）*containerHeight）；
var maxBottom=容器高度-（顶部+元素偏移高度+5）；
if（maxBottom<0）{
top-=Math.abs（maxBottom）；
}
elem.style.left=左+像素；
elem.style.top=top+px；
子容器（elem）；
可见++；
});
#容器{
边框：1px纯黑；
高度：500px；
宽度：500px；
位置：相对位置；
}
埃伦先生{
显示：内联块；
位置：绝对位置；
}

我试图编写此代码：但它没有起作用