如何防止手机网页双击屏幕实现放大效果

最新推荐文章于 2021-06-11 14:52:04 发布
最新推荐文章于 2021-06-11 14:52:04 发布
阅读量1.2k 收藏 1
点赞数
文章标签： xhtml 前端 c# ViewUI
原文链接：https://yq.aliyun.com/articles/573377
版权

使用过手机或者其他移动设备上网的朋友，可能会发现这样的功能，就是双击屏幕可以实现网页放大效果，但是有时候我们并不希望有这样的功能，下面就介绍一下看如何组织此现象的出现。

一.首先DTD表头要声明为移动类型:

 
 
 
  
 
   
 
    
 
        

          1 
        
 		 
        
 
         
 
          <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
         
 
        
 
 
   
 
  
 
 
 
 
二.然后禁用缩放功能:
 
 
 
 
 
  
 
   
 
    
 
        

          1 
        
 		 
        
 
         
 
          < 
          meta 
          name 
          = 
          "viewport" 
          content 
          = 
          "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" 
          /> 
         
 
        
 
 
   
 
  
 
 
 
 
只要将user-scalable属性值设置为0即可。
 
 

 
 

 
 
原文发布时间为：2017-2-13
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：如何防止手机网页双击屏幕实现放大效果
 


                

        

        




    

  


    

      

        

            

              
                
                  weixin_34375251
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
如何解决手机浏览器页面点击不跳转浏览器双击放大网页

				
			

			

				

					11-22
				

			

		

		

			
				
手机端web网页项目
1，angluar js 1.4.6

网页项目开发过程中，使用PC浏览器能正常访问，IOS设备浏览器也能正常访问，但是使用Android部分浏览器进行访问的时候，链接偶尔不跳转，点击完没有任何反应（本人使用angluar js route进行单页面应用跳转），此时地址栏的路径已经被更新为点击后的地址，并且双击页面网页会放大（顺着这个现象去找到了问题）

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？

解决方案：

可以在页面头部加上meta


&lt;meta name="viewport" content="width=devi

			
		

	



                

              
                



	

		

			

				
					
禁止html5手机端双击页面放大的问题

				
			

			

				

					qq_46177396的博客
				

				

					09-10
					
					291
					
				

			

		

		

			
				
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

1. meta标签的作用是让当前viewport的宽度等于设备的宽度
2. maximum-scale为允许用户的最大缩放值
3. user-scalable为是否允许用户进行缩放
4. yes(默认)代表允许，no(0)代表不允许

...

			
		

	



                


  
              

                


	

		

			

				
					
html手机网页不可放大,阻止移动设备(手机、pad)浏览器双击放大网页的方

				
			

			

				

					weixin_39875419的博客
				

				

					06-11
					
					1069
					
				

			

		

		

			
				
点评：这篇文章主要介绍了阻止移动设备(手机、pad)浏览器双击放大网页的方法,需要的朋友可以参考下现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明，移动设备要用下...

			
		

	





	

		

			

				
					
手机页面点击不选中元素

				
			

			

				

					weixin_34226182的博客
				

				

					06-16
					
					95
					
				

			

		

		

			
				
手机页面添加点击事件的时候，元素会被选中，这并不是我们想要的结果，可以通过-webkit-tap-highlight-color: rgba(0,0,0,0)这段CSS来解决这个问题，这个属性具有继承性。
转载于:https://www.cnblogs.com/invincible-hehe/p/3791481.html...

			
		

	



		

			
		



	

		

			

				
					
阻止移动设备(手机、pad)浏览器双击放大网页的方法

				
			

			

				

					09-28
				

			

		

		

			
				
总的来说，通过正确地设置`viewport`元标签，我们可以有效地阻止移动设备浏览器的双击放大功能，同时优化网页在小屏幕设备上的显示效果。这在设计响应式网页或者希望保持固定布局的应用中尤其有用。记住，尽管禁用...

			
		

	





	

		

			

				
					
jquery手机网页放大缩小

				
			

			

				

					11-20
				

			

		

		

			
				
为了解决这个问题，开发者经常使用jQuery来实现手机网页上的图片放大和缩小功能，以提供更好的用户体验。本篇将详细介绍如何利用jQuery实现这一功能，并探讨相关的核心知识点。  首先，jQuery是一个流行的JavaScript...

			
		

	





	

		

			

				
					
jQuery移动端双击图片放大特效.zip

				
			

			

				

					07-04
				

			

		

		

			
				
"jQuery移动端双击图片放大特效"是一个专为手机商城设计的代码实现，它允许用户通过双击操作来放大商品图片，以便更清晰地查看商品细节。这个功能提升了用户在浏览商品时的交互体验，使他们能够方便地查看产品特性。...

			
		

	





	

		

			

				
					
移动端点击图片放大特效PhotoSwipe.js插件实现

				
			

			

				

					10-21
				

			

		

		

			
				
PhotoSwipe.js 是一个专为移动端设计的轻量级图片查看器插件，它能够实现用户在手机或平板设备上点击图片后进行全屏展示，并且支持手势操作，如滑动切换图片、双击放大等。这个插件非常适合用于网站或者APP中，提升...

			
		

	





	

		

			

				
					
上传图片至DIV（双击可以放大）

				
			

			

				

					07-26
				

			

		

		

			
				
4. **图片放大**：双击图片可以实现放大效果，这通常通过JavaScript或jQuery实现。双击事件触发后，可以通过修改图片的CSS属性，如`width`和`height`，或者创建一个新的全屏弹出窗口来实现放大。同时，可能还需要...

			
		

	





	

		

			

				
					
阻止手机浏览器双击放大的方法

				
			

			

				

					qietuwang的博客
				

				

					07-20
					
					9774
					
				

			

		

		

			
				
切图网在为一个项目提供h5微信上使用的小游戏开发的时候，设计到快速点击按钮来发电的游戏规则，所以用户需要不断的点击按钮来发更多的电量，这不断的点击会触发双击的动作，浏览器就放大了。为了这个问题百度了很多资料，下面是主流的解决方案。
-----------------
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？
在Mobile页面上有提供viewport

			
		

	





	

		

			

				
					
如何阻止移动设备(手机,pad)浏览器双击放大网页？

				
			

			

				

					ldl_xz的专栏
				

				

					04-05
					
					8042
					
				

			

		

		

			
				
如何阻止移动设备(手机,pad)浏览器双击放大网页？

			
		

	





	

		

			

				
					
手机端页面的点击效果实现

				
			

			

				

					MaRain
				

				

					08-06
					
					3456
					
				

			

		

		

			
				
前提产品设计 UI 经常会在设计时设计手机点击效果，虽然只有这个一个效果，但是却让我感觉非常头疼。。解决历程首先说 手机端会有一个默认的样式，点击出现一个黑块，这个可以通过  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  or
  -webkit-tap-highlight-color: transparent;  
去掉黑块我刚开始想的是添加一个

			
		

	





	

		

			

				
					
h5页面禁止双击或者双指放大

				
			

			

				

					weixin_44673034的博客
				

				

					12-02
					
					2357
					
				

			

		

		

			
				
大多情况下，为了省事，可以直接用
但是存在个缺陷，就是如果页面需要双击放大，比如3D地图，就用不了了
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

也可以采用js方式控制，代码如下，
 //...

			
		

	





	

		

			

				
					
手机端双击页面放大的问题

				
			

			

				

					qq_43248623的博客
				

				

					08-25
					
					962
					
				

			

		

		

			
				
制作手机端页面的时候我们都会加入一个meta标签，

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
其中 maximum-scale为允许用户的最大缩放值，user-scalable为是否允许用户进行缩放，yes(默认)代表允许，no(0)代表不允许，两者结合使用可以阻止页面被放大（经测试，少一项都达不到效果）

...

			
		

	





	

		

			

				
					
如何阻止浏览器双击放大？

					
热门推荐

				
			

			

				

					victoryckl的专栏
				

				

					07-17
					
					1万+
					
				

			

		

		

			
				
http://www.web-tinker.com/question/236.html
118.26.60.* 
2013-01-07 17:49:12 
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？
次碳酸钴
2013-01-07 18:00:57 在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。
但是在使用viewp

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值