为什么<meta name="viewport">的inital-scale属性无效

最新推荐文章于 2022-11-16 18:41:37 发布
转载 最新推荐文章于 2022-11-16 18:41:37 发布 · 2.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/572695
文章标签：

#javascript #移动开发 #ViewUI

使用inital-scale属性可以设置缩放比例，但是有时候设置了此属性以后可能会不起作用。

这种问题通常发生在刚开始接触此标签的朋友身上，因为此属性还会受到其它属性的影响。

看如下代码实例:

 
 
 
  
 
   
 
    
 
        

         1
        
 		 
        
 
         
 
          <
          meta 
          name
          =
          "viewport" 
          content
          =
          "width=device-width,inital-scale=2,maximum-scale=4.0,minimum-scale=1.0"
          /> 
         
 
        
 

   
 
  
 
 
 
 
在上面的代码中，虽然设置inital-scale属性，但是并没有起到任何的效果，
 
 

 
 
原文发布时间为：2017-2-25
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：为什么<meta name="viewport">的inital-scale属性无效
 


                

        




    

    
  



    



                



	

		

			

				
					
meta设置手机端访问电脑端页面_meta 设置viewport到底有何用

				
			

			

				

					weixin_39983563的博客
				

				

					12-19
					
					888
					
				

			

		

		

			
				
# 先说结论如果页面本身是移动端的设计风格，设计师在设计页面时按移动端通用的375px或者428px来做设计，我们需要在head标签里加<meta name="viewport" content="width=device-width">。如果原本就是针对PC浏览器设计的页面未适配过移动端，不推荐加此meta。<meta name="viewport" content="widt...

			
		

	



                

            
              



	

		

			

				
					
手机html开发，简单实例，头部底部固定，中间可以滚动

				
			

			

				

					学以致用
				

				

					04-06
					
					2576
					
				

			

		

		

			
				
直接贴出html代码，桌面新建html，拷贝进去就能使用(为方便使用，css写在一起。)

/***********************************star***********************************************/










    inital-scale表示的初始的缩放比例.1.0倍

user-sc

			
		

	



              


  
              

                


	

		

			

				
					
菜鸟实习——关于viewport标签不起作用，移动端无法显示完整以及viewport标签有的属性

				
			

			

				

					zahuilg10的博客
				

				

					01-14
					
					1910
					
				

			

		

		

			
				
今天遇到一个问题关于使用
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个手机端依旧无法显示完整网页，总结了2个想法

不能同时出现两个viewport用来定义缩放比例
尽量写在前面，我之前把他写在title标签下面依旧不起作用


viewport属性及介绍：




项目
Value...

			
		

	





	

		

			

				
					
iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法...

				
			

			

				

					weixin_30652491的博客
				

				

					11-16
					
					518
					
				

			

		

		

			
				
iphone在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。
关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。
iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。
当你用手指拖动时，其实拖...

			
		

	



		

			
		



	

		

			

				
					
【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

				
			

			

				

					pingan8787
				

				

					11-29
					
					1474
					
				

			

		

		

			
				
本文字数：6912字预计阅读时间：30分钟1导读viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。移动端开发中，有一个躲避不掉的HTML ...

			
		

	





	

		

			

				
					
不生效 设置了viewport_viewport就是这回事

				
			

			

				

					weixin_40003767的博客
				

				

					12-23
					
					754
					
				

			

		

		

			
				
前言对于移动webapp开发人员来说，viewport是个很重要的东西，容易用但很多时候都是不明白的，于是我决心去弄清楚它。viewport涉及的单位分辨率：指设备显示器所能显示的像素有多少物理分辨率：指设备显示器所能显示最高的像素数DPI (Dots Per Inch)：每英寸的点数密度PPI(Pixels Per Inch)：每英寸的像素点DIP/DP(device independent p...

			
		

	





	

		

			

				
					
刮刮卡代码

				
			

			

				

					04-16
				

			

		

		

			
				
		<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> 		<meta name="apple-mobile-web-app-capable" content="yes"> 		<meta name=...

			
		

	





	

		

			

				
					
html5 手机页面开发（easyui mobile）——登录页面

				
			

			

				

					weixin_30492601的博客
				

				

					02-20
					
					4210
					
				

			

		

		

			
				
1. html5
HTML5大家早就不陌生了，HTML最新版本，提供了很多富客户端功能支持，但是在台式系统因为受到某些浏览器限制发展缓慢，而移动设备因为没有旧包袱，所有厂家都在向HTML5靠齐，因此移动设备（特别是最新的设备）的浏览器对HTML5支持度非常高。所以大多数智能移动设备上都能跑HTML5应用。

关于HTML5，并不是你想像中的那么神秘。说白了，HTML5功能也是由HTML标签...

			
		

	





	

		

			

				
					
CSS+HTML知识点总结

				
			

			

				

					ErMengmengmeng的博客
				

				

					05-23
					
					838
					
				

			

		

		

			
				
CSS+HTML知识点总结
二级目录
三级目录
文档声明（doctype）
文档声明用来告诉浏览器当前网页的版本。
<!doctype html>
<!Doctype HTML>

这两种形式都表示下面写的网页是html5的版本，大小写都可以
字符编码
** 编码**
将字符转换为二进制码的过程
** 解码**
将二进制转换为字符的过程
** 字符集（chartset）**...

			
		

	





	

		

			

				
					
仿浏览器html本地搜索

				
			

			

				

					hehehe的博客
				

				

					05-24
					
					3113
					
				

			

		

		

			
				
仿浏览器html本地搜索

本文为整理博客，仿浏览器做的一个html本地内容搜索并标记指向搜索文本


JavaScript
jquery
css






效果图





JavaScript Code：




var oldKey0 = &amp;quot;&amp;quot;;
var index0 = -1; var oldCount0 = 0;
var newflag = 0;
var currentLength =...

			
		

	





	

		

			

				
					
移动端适配方案之viewport适配

				
			

			

				

					wuxing164的博客
				

				

					11-23
					
					678
					
				

			

		

		

			
				
#width给的数据是基于设计稿给的宽度。
<script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let met.

			
		

	





	

		

			

				
					
不生效 设置了viewport_关于安卓webview viewport的问题

				
			

			

				

					weixin_39855796的博客
				

				

					02-22
					
					936
					
				

			

		

		

			
				
最近在写react-native的项目的webview 引入了一个html，发现viewport无效，页面很宽在安卓下会出现滚动条，而在ios里面会自动缩小展示，想实现安卓也像苹果那样自动缩小显示，但是调了viewport一直没有效果网上查找了发现文章链接https://blog.csdn.net/eastbird/article/details/48679295对于ios设备，设置width可以...

			
		

	





	

		

			

				
					
html网页不随缩放而变形,html不随放大缩小而变形——initial-scale

				
			

			

				

					weixin_39876145的博客
				

				

					06-25
					
					1633
					
				

			

		

		

			
				
写在前面：很惭愧我都在做jq了，关于手机端页面变形，直到今天早上才知道问题出在哪里？之前写了好多css页面用谷歌的F12查看手机端的页面，效果如下面的图，然后我一直以为我电脑的谷歌F12出问题了，直到今天在启宸师兄的帮助下才明白。下面进入正文：一直以为是谷歌F12出问题了，查了好多相关的资料还是没查到，然后今天回过头来修改之前页面的问题，然后看到head头部，就觉得可能是initial-scale...

			
		

	





	

		

			

				
					
html不随放大缩小而变形——initial-scale

				
			

			

				

					OBKoro1前端分享
				

				

					03-30
					
					4万+
					
				

			

		

		

			
				
写在前面：很惭愧我都在做jq了，关于手机端页面变形，直到今天早上才知道问题出在哪里？之前写了好多css页面用谷歌的F12查看手机端的页面，效果如下面的图，然后我一直以为我电脑的谷歌F12出问题了，直到今天在启宸师兄的帮助下才明白。下面进入正文：
一直以为是谷歌F12出问题了，查了好多相关的资料还是没查到，然后今天回过头来修改之前页面的问题，然后看到head头部，就觉得可能是initial-sca

			
		

	





	

		

			

				
					
index.html中添加视口 发大 缩小无效

				
			

			

				

					ZH445063477的博客
				

				

					06-05
					
					307
					
				

			

		

		

			
				
index.html中添加视口 发大 缩小无效

			
		

	





	

		

			

				
					
关于HTML5中meta name=“viewport“ 的用法

					
热门推荐

				
			

			

				

					自然醒
				

				

					11-01
					
					7万+
					
				

			

		

		

			
				
vieport，移动端布局

			
		

	





	

		

			

				
					
meta 标签禁止缩放失效

				
			

			

				

					江木
				

				

					09-12
					
					8955
					
				

			

		

		

			
				
meta 标签禁止缩放失效

			
		

	





	

		

			

				
					
css：为什么我设置宽高百分比不生效

				
			

			

				

					分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
				

				

					11-16
					
					5575
					
				

			

		

		

			
				
很多新手朋友写 css 的时候，有时发现设置宽高百分比有用，有时候又没用，到底怎么回事呢？

			
		

	





	

		

			

				
					
html5开发之viewport使用

				
			

			

				

					weixin_34378767的博客
				

				

					08-30
					
					1213
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width,initial-scale=1.0">     <title>vue-demo-01</title>   </head>   <body>     <div id="app"></div>     <!-- built files will be auto injected -->   </body> </html>

					
最新发布

				
			

			

				

					05-18
				

			

		

		

			
				
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title><%= htmlWebpackPlugin.options.title %></title> <!-- 动态注入标题 ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值