移动开发webapp开发常用meta设置(手机浏览器全屏模式 html5)

最新推荐文章于 2021-09-22 10:58:11 发布
最新推荐文章于 2021-09-22 10:58:11 发布
阅读量1.1k 收藏 3
点赞数
文章标签： 移动开发
原文链接：http://www.cnblogs.com/youran/p/9184472.html
版权
本文介绍了移动WebApp开发中实现全屏模式、隐藏状态栏、设置状态栏颜色、防止电话号码和邮箱自动识别的方法。通过meta标签配置，可以优化在手机浏览器上的显示效果，提供更好的用户体验。
摘要由CSDN通过智能技术生成

1、WebApp全屏模式：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

注意：viewport 后面加上 minimal-ui 在safri 体现效果

<meta name="apple-mobile-web-app-capable" content="yes" />

 

<meta name="full-screen" content="yes">
 <meta name="browsermode" content="application">

2、隐藏状态栏/设置状态栏颜色：


 



                

        

        




    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  ditou5497
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
移动端webapp 全屏

				
			

			

				

					qq_41988167的博客
				

				

					11-18
					
					757
					
				

			

		

		

			
				
最近使用vux开发一款手机webapp，在手机上看到地址栏和下面的工具栏占了很大一部分空间，就想可不可以去掉。最终找到了解决办法。我用的是vue cli生成的模板，在项目根目录下的index.html头部加上下面内容：

    
    
	
	
	
	
	
	
	
	
  **‘viewport’** ：设置显示方式，一般适配移动设备用来避免缩放和影响体验的滚动条 
width=device-...

			
		

	



                

              
                



	

		

			

				
					
meta 之 viewport(移动网页的全屏)

				
			

			

				

					{丸の子}
				

				

					08-01
					
					170
					
				

			

		

		

			
				
整理硬盘中几个月来整的小东西，移动网页开发涉及到 viewport，随意一篇，分享一下。
常用的 viewport meta 如下：
[code="java"]


			
		

	



                


  
              

                


	

		

			

				
					
移动前端头部标签(HTML5 head meta)

				
			

			

				

					weixin_33737134的博客
				

				

					02-04
					
					121
					
				

			

		

		

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

			
		

	





	

		

			

				
					
meta控制网页为全屏幕大小

				
			

			

				

					weixin_34150830的博客
				

				

					12-27
					
					599
					
				

			

		

		

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

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到...

			
		

	



		

			
		



	

		

			

				
					
html自动全屏 meta,HTML <meta> 设置

				
			

			

				

					weixin_34830055的博客
				

				

					05-31
					
					762
					
				

			

		

		

			
				
背景今天再看一个html页面源码的时候，发现head标签内部有很多标签，特此记录梳理一下。标签作用 标签是HTML网页源代码中的一个重要的html标签，meta 标签用来描述一额 HTML 网页文档的属性，例如作者、日期和时间、关键词、页面刷新。除此之外， 标签用于搜索引擎优化(SEO)。它位于 HTML 文档中  元素内，虽然它提供的信息用户不可见，但他却是文档最基本的元信息。 标签的属性列举 ...

			
		

	





	

		

			

				
					
HTML5头部<meta>标签的一些常用信息小结

				
			

			

				

					09-27
				

			

		

		

			
				
例如，设置网页标题、是否启用WebApp全屏模式、设置状态栏的背景颜色等。 示例代码： ```html <meta name="apple-mobile-web-app-title" content="我的网页"/> <meta name="apple-mobile-web-app-capable" content=...

			
		

	





	

		

			

				
					
移动Web开发基础-meta锦集

				
			

			

				

					前端向朔
				

				

					09-24
					
					798
					
				

			

		

		

			
				
什么是metaMeta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。Meta ： 即 元数据（Metadata）是数据的数据信息。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果

			
		

	





	

		

			

				
					
HTML常用meta大全(推荐)

				
			

			

				

					11-21
				

			

		

		

			
				
 - `<meta name="apple-mobile-web-app-capable" content="yes">`开启WebApp全屏模式，移除iOS设备顶部的地址栏和底部的工具栏。  - `<meta name="apple-touch-fullscreen" content="yes">`与上一个类似，也用于开启...

			
		

	





	

		

			

				
					
HTML标签meta总结,HTML5 head meta 属性整理

				
			

			

				

					09-28
				

			

		

		

			
				
HTML中的meta标签是HTML5头元素中的重要组成部分，主要用于提供元信息，如页面描述、关键词、作者信息以及针对不同设备和浏览器的优化设置。在移动前端开发中，正确使用meta标签能够极大地提升用户体验和搜索引擎...

			
		

	





	

		

			

				
					
android浏览器自动全屏,android-完整的网页和所有移动浏览器的禁用的缩放视口元标记...

				
			

			

				

					weixin_42188533的博客
				

				

					05-25
					
					452
					
				

			

		

		

			
				
不幸的是，每个浏览器都有自己的视口元标记实现。 不同的组合将在不同的浏览器上工作。Android 2.2：似乎根本不支持视口元标记。Android 2.3.x / 3.x：通过设置user-scalable = no，您也可以自己禁用视口meta标签的缩放。 这可能就是您的宽度选项无效的原因。 要允许浏览器缩放内容，您需要设置user-scaleable = yes，然后要禁用缩放，可以将最小和最...

			
		

	





	

		

			

				
					
实现HTML页面在手机浏览器上全屏的方式

				
			

			

				

					Ronnie -- 徘徊于前端与后台之间
				

				

					02-28
					
					1万+
					
				

			

		

		

			
				
<br />在手机等移动设备上，很多内置的浏览器会缩放页面，为了是页面全屏无缩放，需要在页面的head部分加如下代码：<br /><head>

<meta name="viewport" content="user-scalable=no, width=device-width" />

</head><br /> <br /> 

			
		

	





	

		

			

				
					
META标签属性说明

				
			

			

				

					weixin_36106791的博客
				

				

					08-24
					
					1657
					
				

			

		

		

			
				
总结一些常用的meta标签属性及应用。
1、声明文档使用的字符编码:
  <meta charset='utf-8'>

2、强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 

3、必须联网才可以访问,禁止浏览器从本地计算机的缓存中访问页

			
		

	





	

		

			

				
					
移动开发webapp开发常用meta设置手机浏览器全屏模式

				
			

			

				

					weixin_33874713的博客
				

				

					04-02
					
					1027
					
				

			

		

		

			
				
1、WebApp全屏模式：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
注意：viewport 后面加上minimal-ui 在safri 体现效果
...

			
		

	





	

		

			

				
					
HTML meta 标签的使用方式总结(本文总结17中使用方式)

				
			

			

				

					黑木令之佛性
				

				

					06-29
					
					1万+
					
				

			

		

		

			
				
介绍 meta 标签的常规使用以及使用 meat 标签设置页面的缓存效果; 提升前端开发同学对请求过程中的缓存认识与设置 。
废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
一:  meta 标签的使用和总结:
1. <meta> 元素可提供有关页面的 元信息(meta-information), 比如针对 搜索引擎 和 更新频度 的描述和关键词 。

2. <meta> 标签位于文档的头部, 不包含任何内容 。

3. <m

			
		

	





	

		

			

				
					
js怎么让浏览器自动全屏显示

					
热门推荐

				
			

			

				

					Artful_Dodger的博客
				

				

					07-24
					
					2万+
					
				

			

		

		

			
				
在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发，所以不能自动全屏；用户事件触发方法如下：

// 判断各种浏览器，找到正确的方法 进入全屏
function launchFullscreen (element) {
  if (element.requestFullscreencreen) {
    element.requestFullScreen()
  } else

			
		

	





	

		

			

				
					
meta 标签的使用：

				
			

			

				

					weixin_46174785的博客
				

				

					05-23
					
					516
					
				

			

		

		

			
				
meta  标签的使用：
name  属性：


uc 浏览器强制竖屏：
<meta name="screen-orientation" content="portrait">



QQ 强制竖屏：


<meta name="x5-orientation" content="portrait">



UC 强制全屏：
<meta name="full-screen" content="yes">



QQ 强制全屏：
<meta name="x5-fulls

			
		

	





	

		

			

				
					
meta 标签技巧

				
			

			

				

					qq_37493515的博客
				

				

					09-22
					
					214
					
				

			

		

		

			
				
忽略自动识别电话
<meta name="format-detection" content="telephone=no">

忽略自动识别邮箱
<meta name="format-detection" content="email=no">

忽略自动识别电话和邮箱
<meta name="format-detection" content="telephone=no, email=no">

禁止页面缩放
在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本

			
		

	





	

		

			

				
					
移动端常见meta设置

				
			

			

				

					wf2017的博客
				

				

					02-19
					
					2598
					
				

			

		

		

			
				
设置meta

			
		

	





	

		

			

				
					
HTML5移动开发：11大框架助力WebApp

				
			

			

				

					
				

			

		

		

			
				
"这篇文章列出了11个有助于移动网页开发的App和HTML5框架，针对触屏设备的增长和移动Web应用的需求，提供了多种工具供开发者选择。这些框架支持多种流行平台，如iOS、Android、Blackberry和WebOS，旨在帮助开发者...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值