关于手机端点击HTML input输入框页面放大的问题解决放法

最新推荐文章于 2023-03-26 08:15:40 发布
最新推荐文章于 2023-03-26 08:15:40 发布
阅读量8k 收藏 5
点赞数
分类专栏： andorid web 文章标签： html 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22515353/article/details/60575460
版权
andorid 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
web
4 篇文章 0 订阅
订阅专栏 
这个是我最近遇到的问题，在找了很久的资料以后终于找到了解决放法
 

<script>
    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
       var version = parseFloat(RegExp.$1);
    if(version>2.3){
       var phoneScale = parseInt(window.screen.width)/230;
       document.write('<meta name="viewport" content="width=230, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user-scalable=no, target-densitydpi=device-dpi">');
       }else{
            document.write('<meta name="viewport" content="width=230, target-densitydpi=device-dpi">');
       }
       }else{
            document.write('<meta name="viewport" content="width=230, user-scalable=no, target-densitydpi=device-dpi">');
       }
</script>
 

只需要把这段代码复制到HTML页面就行了
 

别忘了设置这个
<meta name="viewport" content="width=drvice-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

 


                

        

        

    




    

      

        

            

              
                
                  拉银
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

				
			

			

				

					12-10
				

			

		

		

			
				
在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素，
当点击input框时在安卓手机上出现了：
1 虚拟键盘弹出盖住input
2 底部定位的元素被挤上来
网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度是变化的，监听[removed]，判断是否吊起键盘，然后设定底部模块的隐藏和显示，整个块元素的margintop就可以实现了。
代码如下

 mounted () {
 this.clientHeight =

			
		

	



                

              
                



	

		

			

				
					
手机端网页输入框点后页面不想要放大，解决方案.txt

				
			

			

				

					04-18
				

			

		

		

			
				
主意，跟别人的不一样就是哪个0.5  缩放要调到0.5 这样会缩小，点击就不会放大。你可以测式这个0.5缩放比例。我是用这个0.5，想了一个晚上解决的。哪个1，把整个页面都调了，就没用了
<meta content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no, width=device-width" name="viewport">，


			
		

	



                


  
              

                


	

		

			

				
					
html手机自动放大,解决HTML5手机端页面缩放的问题

				
			

			

				

					weixin_29197051的博客
				

				

					05-30
					
					2228
					
				

			

		

		

			
				
通常在写HTML5手机端页面的时候，我们会发现页面所显示元素的比例不正确，那此时我们需要添加的就是：或者是那么我们来对这句话解释一下就是：viewport ： 表示的是显示窗口；width=device-width,initial-scale=1.0 ： 表示的是显示窗口的宽度等于设备的屏幕宽度，initial-scale=1.0，即初始的缩放比例为1.0；minimum-scale ： 表示的是...

			
		

	





	

		

			

				
					
HTML输入框点击时候变大,解决手机浏览器上input 输入框导致页面放大的问题（记录）...

				
			

			

				

					weixin_42516007的博客
				

				

					06-04
					
					792
					
				

			

		

		

			
				
多字段 java对象排序public class ReflexUtil { static Logger logger = LoggerFactory.getLogger(ReflexUtil.class); //getMet ...学习 easyui 之一：easyloader 分析与使用http://www.cnblogs.com/haogj/archive/2013/04/22/3036685...

			
		

	



		

			
		



	

		

			

				
					
android webview input控件获取焦点放大的问题

				
			

			

				

					jinxin610的博客
				

				

					01-08
					
					1749
					
				

			

		

		

			
				
最近用webview链接一个h5网页，发现当input获取焦点的时候页面就会自动放大，这让哥蛋疼不已，研究了半天走了很多弯路，最终终于解决了


方法：只需要在h5页面中加上这句就可以了，切记其实是“user-scalable=no”这句
起到的决定性作用。

			
		

	





	

		

			

				
					
android 加载web view的时候，点击输入框，导致页面放大的问题解决方法

				
			

			

				

					Afanbaby的博客
				

				

					04-06
					
					2246
					
				

			

		

		

			
				
android加载web view，web view中有输入框，当我点击输入框的时候，发现页面被放大的，但是我们在代码中已经限制它不可以缩放的了，因此我们需要解决这个问题！解决方法： 
1.让你的后台同事加上以下得到代码，<!-- 下面两句代码是做手机适配用的 ， 加上之后手机网页就会自动适配-->
<meta name="viewport" content="width=device-width"

			
		

	





	

		

			

				
					
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

				
			

			

				

					12-14
				

			

		

		

			
				
前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<input type="date">输入框，没加任何的样式，效果是白色的背景再加上边框很丑，完全与整个背景不协调。 刚开始设置了输入框...

			
		

	





	

		

			

				
					
解决ios手机中input输入框光标过长的问题

				
			

			

				

					01-04
				

			

		

		

			
				
在项目中做移动端页面，发现IOS 的光标大小很大，和安卓的完全不一样，思考怎么调整大小，通过实践和尝试，找到了解决方法，现分享给大家。 修改前css部分代码：  .receiving-info .receiving-info-list input {  ...

			
		

	





	

		

			

				
					
解决vue项目input输入框双向绑定数据不实时生效问题

				
			

			

				

					10-15
				

			

		

		

			
				
总之，解决Vue项目中input输入框双向绑定数据不实时生效的问题，通常需要利用`this.$set`确保数据的响应性，或者调整`v-model`的绑定方式。而在处理`v-for`循环时，应确保`key`的唯一性和正确性，以避免编译错误或...

			
		

	





	

		

			

				
					
移动端输入框获取焦点时页面自动放大的问题

				
			

			

				

					weixin_52054631的博客
				

				

					01-13
					
					523
					
				

			

		

		

			
				
如题，

解决方案：给输入框设置属性 font-size: 16px;

参考文章：https://blog.csdn.net/cc18868876837/article/details/88915767


			
		

	





	

		

			

				
					
HTML怎么设置input框大小

					
热门推荐

				
			

			

				

					weixin_47378963的博客
				

				

					03-26
					
					1万+
					
				

			

		

		

			
				
HTML input元素定义的输入框的大小，可以通过CSS的width属性和height属性来分别设置input框的宽度和高度，如果只是设置这些，input输入框中的字体并不会跟着改变大小，如果还需要设置input输入框内字体的大小，则需要另外进行设置。下面的实例来先介绍一下改变input框大小的设置方法。：input为元素选择器，也可以通过其它的选择器，比如id选择器、类选择器等等。HTML设置input框大小的实例代码，及在线编辑器。HTML设置input框大小的方法。

			
		

	





	

		

			

				
					
阻止input输入文字时页面视图放大

				
			

			

				

					u013994400的博客
				

				

					11-16
					
					362
					
				

			

		

		

			
				
在页面head中加入
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 

限制页面最大最小缩放为1。可以阻止input输入文字时页面视图放大



			
		

	





	

		

			

				
					
彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小

				
			

			

				

					Tz
				

				

					11-01
					
					896
					
				

			

		

		

			
				
为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小，
但是随着前端届的日新月异的变化，反而随意放大缩小成了我们需要解决的问题；

安卓手机解决方案：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1....

			
		

	





	

		

			

				
					
关于移动端点击input，textarea....获取焦点时界面放大的解决方案

				
			

			

				

					qq_37100378的博客
				

				

					10-15
					
					2840
					
				

			

		

		

			
				
1. 问题描述
项目登陆界面的用户名及密码输入，input框获取焦点界面会被放大；以及项目中使用了前端的vant-ui框架布局界面，当触发下拉选择（popup），日期选择等插件时候也会出现界面放大的问题；
a . 普通的安卓手机就非常人性化了，此处省略一万字的彩虹p…，解决方案非常简单nice：
在项目公用的index.html界面中加上：
<meta name="viewport" con...

			
		

	





	

		

			

				
					
IOS移动端，表单input聚焦时页面放大的解决办法

				
			

			

				

					祈澈菇凉
				

				

					06-10
					
					4288
					
				

			

		

		

			
				
前言在移动端开发项目中，发现页面在使用 iPhone 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大，而且失去焦点之后页面不能返回原来的样子。手指双击页面时候也会放大检查了下，功能上没有什么大问题，但是页面会整体放大，而且失去焦点之后页面不能返回原来的样子。用户体验不好最后找到原因：苹果觉得点击输入框放大是一个“很...

			
		

	





	

		

			

				
					
html5输入框自动放大,js实现input输入框点击变大缩小

				
			

			

				

					weixin_35851508的博客
				

				

					06-01
					
					2454
					
				

			

		

		

			
				
本文主要和大家分享js实现input输入框点击变大缩小的实例代码，希望能帮助到大家。一、input输入框点击变大缩小的js代码html中input[type='text'] {width: 100px;height: 30px;border-radius: 5px;}标题:内容:js代码中$(document).ready(function() {$("input[type='text_conte...

			
		

	





	

		

			

				
					
html的input标签，设置size后会影响到页面的放大缩小排版

				
			

			

				

					u010523770的专栏
				

				

					06-30
					
					4605
					
				

			

		

		

			
				
通过jsp：include引入的页面，页面缩小后，排版混乱。



原来是因为，我的“添加采购备注”这个input标签设置了size="205"，导致，这个文本框使用有固定的大小，不能缩放。


解决办法，就是去掉size="205"这个input标签的属性，页面缩放就正常了。

			
		

	





	

		

			

				
					
IOS系统中input标签获取焦点页面会放大的问题

				
			

			

				

					start_sea的博客
				

				

					08-04
					
					1329
					
				

			

		

		

			
				
IOS系统中input标签获取焦点页面会放大的问题
在iOS系统中打开网页，input框输入时，输入框获取焦点的时候页面会放大，如果没有经过设置，页面放大之后就不会自动还原。使内容撑开浏览器，底部产生左右滑动的滚动条，相当恶心。
原因：
没有禁止页面缩放。
解决：
在html文件的标签中加入下面代码。

![在这里插入图片描述](https://img-blog.csdnimg.cn/ada1416b5faa40468e9d7cdc40fcedae.png)
听说这个方法可能不会百分百生效（iPhone X

			
		

	





	

		

			

				
					
点击事件放在elementui组件input输入框图标放大镜中

					
最新发布

				
			

			

				

					06-07
				

			

		

		

			
				
您可以在Input组件中使用slot来自定义输入框的前缀或后缀图标，然后在图标上绑定click事件即可实现点击事件。

以下是一个示例代码：

```html
<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容" :prefix-icon="searchIcon">
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      searchIcon: 'el-icon-search'
    }
  },
  methods: {
    handleClick() {
      console.log('点击了搜索图标')
    }
  },
  mounted() {
    const icon = this.$el.querySelector('.el-input__prefix .el-icon-search')
    icon.addEventListener('click', this.handleClick)
  },
  beforeDestroy() {
    const icon = this.$el.querySelector('.el-input__prefix .el-icon-search')
    icon.removeEventListener('click', this.handleClick)
  }
}
</script>
```

在上面的代码中，我们定义了一个名为searchIcon的变量，它的值为'el-icon-search'，这是Element UI中的一个预定义图标。然后在Input组件上使用了prefix-icon属性来设置输入框的前缀图标为searchIcon。

在mounted钩子函数中，我们获取到了输入框前缀图标的DOM元素，然后为它添加了一个click事件，事件处理函数为handleClick。在beforeDestroy钩子函数中，我们移除了click事件的监听器，以防止内存泄漏。

当用户点击搜索图标时，会触发handleClick方法，从而打印出一条信息。您可以根据自己的需求修改handleClick方法来处理点击事件。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值