在各种平台上保持div的大小(例如智能手机,平板电脑)

时间:2022-06-08 17:38:31

I made a cross-platform/browser compatible app, but there is one problem. The browser on a phone or a tablet will resize the page to fit the screen, which is fine, but it also resizes these divs that I use as buttons. In order for them to be pressable by a human finger they should maintain a size of about 50 by 50 pixels, when the page is shrunk they become smaller (not actually smaller, just zoomed out). Is there a way to use javascript to make sure they stay the right size? --Ashley

我制作了一个跨平台/浏览器兼容的应用程序,但有一个问题。手机或平板电脑上的浏览器会调整页面大小以适应屏幕,这很好,但它也调整了我用作按钮的这些div的大小。为了使它们能够被人的手指按压,它们应该保持大约50乘50像素的尺寸,当页面缩小时它们变得更小(实际上不是更小,只是缩小)。有没有办法使用JavaScript来确保它们保持正确的大小? --Ashley

2 个解决方案

#1


0  

Many mobile devices pretend to be larger than they are to show everything on the page, you can correct this—at least on some mobile devices—by adding this in the head of your document:

许多移动设备假装大于显示页面上的所有内容,您可以通过在文档的头部添加此内容来纠正此问题 - 至少在某些移动设备上:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

#2


0  

In that case you just specify your exact width and height of the button in your css class. Like width:50px; height:50px

在这种情况下,您只需在css类中指定按钮的确切宽度和高度。像宽度:50px;高度:50像素

#1


0  

Many mobile devices pretend to be larger than they are to show everything on the page, you can correct this—at least on some mobile devices—by adding this in the head of your document:

许多移动设备假装大于显示页面上的所有内容,您可以通过在文档的头部添加此内容来纠正此问题 - 至少在某些移动设备上:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

#2


0  

In that case you just specify your exact width and height of the button in your css class. Like width:50px; height:50px

在这种情况下,您只需在css类中指定按钮的确切宽度和高度。像宽度:50px;高度:50像素