如何在平板电脑分辨率中找到x和y位置，并使用用户输入的警报消息进行验证

Question

在屏幕上设计一个三角形。可以使用CSS改变侧面。用户输入——在屏幕上放置三角形的X和Y位置的大小(1024* 768)。验证用户输入(X, Y)，如果值大于屏幕大小，请显示警告消息!(输入的值超出屏幕!!)

Answer 1

screen.width是您的屏幕宽度，例如1400。

screen.height是您的屏幕高度，如900。

使用:

function changePosition(){
let x=document.getElementById('x').value;
let y=document.getElementById('y').value;
if(x>screen.width || y>screen.height){
alert('Error: Wrong input!!');
return false; // stop running code
}
let triangle=document.getElementById('triangle');
triangle.style.left=x+'px';
triangle.style.top=y+'px';
}

div.triangle{
position:absolute; /* free to change element position in screen. */
right:0px;
top:0px;
width:100px;
height:50px;
border:solid 1px black;
}

<div id="triangle" class="triangle"></div>
<input id="x" placeholder="x" type="number">
<input id="y" placeholder="y" type="number">
<input type="button" onclick="changePosition();" value="change pos">

Answer 2

首先，必须知道screen,window,document和viewport之间的区别。每个提供不同的宽度/高度。我将简要介绍一下。

• Screen:设备的实际物理屏幕。
  • window.screen.width or window.screen.height:实际屏幕尺寸，即设备显示的全屏尺寸。读
• 窗口:整个浏览器窗口。它的宽度/高度包括菜单栏、书签栏等和视窗。
  • window.outerWidth or window.outerHeight:浏览器的大小。读
• Viewport:这是一个矩形区域，在那里你可以看到的东西，即你正在查看的网页的一部分，目前是可见的。
  • window.innerWidth or window.innerHeight:返回宽度/高度(以像素为单位)包括滚动条和边框。因此可能是您需要的尺寸。读
  • x.clientWidth or x.clientHeight:例如document.getElementsByTagName('html')[0].clientWidth将返回宽度/高度减去滚动条，边框和边距。读
• 文档:整个网页。它的宽度/高度可以超过视窗/窗口，即垂直/水平滚动以查看视窗上文档的其余部分。
  • 已贬值(不能使用)window.document.widthRead

因此，阅读并理解了所有这些，您可以决定使用哪一个。