元标记?表单域放大焦点但在移动设备上聚焦时不会取消缩放?
Meta tag? form field zooms on focus but does not un-zoom when on focus out on mobile devices?
我有一个网站,我正在尝试使其适合移动设备。当我进入我的表单时,虽然当文本框被选中时,屏幕会在你完成后放大,但不会缩小。我不认为这是我的 CSS 做的,我感觉这涉及到您设置元标记的方式。有没有一种方法可以调整我的元标记,因为它不会缩小,所以不会放大?或者至少让它在失去焦点后缩小。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
如果您想完全删除页面上的缩放功能,您可以尝试将 user-scalable=0
添加到您的视口标签中,就像这样;
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
但这可能并不理想。据我所知,另一种防止这种情况发生的方法是将相关表单的输入文本设置为超过一定大小,以专门防止缩放表单。对于大多数 iOS/mobile 设备,该尺寸似乎在 16px 左右,尽管这可能因设备而异。
input {
font-size: 16px;
}
我有一个网站,我正在尝试使其适合移动设备。当我进入我的表单时,虽然当文本框被选中时,屏幕会在你完成后放大,但不会缩小。我不认为这是我的 CSS 做的,我感觉这涉及到您设置元标记的方式。有没有一种方法可以调整我的元标记,因为它不会缩小,所以不会放大?或者至少让它在失去焦点后缩小。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
如果您想完全删除页面上的缩放功能,您可以尝试将 user-scalable=0
添加到您的视口标签中,就像这样;
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
但这可能并不理想。据我所知,另一种防止这种情况发生的方法是将相关表单的输入文本设置为超过一定大小,以专门防止缩放表单。对于大多数 iOS/mobile 设备,该尺寸似乎在 16px 左右,尽管这可能因设备而异。
input {
font-size: 16px;
}