前端-移动端h5常用<meta>属性

最新推荐文章于 2024-05-06 09:14:40 发布
最新推荐文章于 2024-05-06 09:14:40 发布
阅读量154 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 人工智能 ViewUI
原文链接：http://www.cnblogs.com/vsmart/p/8628479.html
本文介绍移动Web开发中常用的视口元信息属性及其作用，包括如何设置以适应不同设备的显示需求，并覆盖Safari、UC及QQ浏览器等特定浏览器的私有元信息属性，以实现更好的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.常用属性

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

<meta name="format-detection" content="telephone=no, email=no">

  1. ‘viewport’ 
    设置显示方式，一般适配移动设备用来避免缩放和影响体验的滚动条 
    width=device-width：宽度为设备宽度 
    initial-scale: 初始的缩放比例 （范围从>0到 10 ） 
    minimum-scale: 允许用户缩放到的最小比例 
    maximum-scale: 允许用户缩放到的最大比例 
    user-scalable: 用户是否可以手动缩放
  2. ‘format-detection’ 
    忽略页面对手机号、email的识别 
    telephone：yes|no 
    email：yes|no

2.Safari浏览器私有meta属性

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="APP name">

  1. ‘apple-mobile-web-app-capable’ 
    隐藏浏览器的地址栏和toolbar，页面显示为全屏，不加此meta则默认显示地址栏和toolbar 
    content：yes|no
  2. ‘apple-mobile-web-app-status-bar-style’ 
    content：default|black| black-translucent，即白色、黑色、灰色半透明
  3. ‘apple-mobile-web-app-title’ 
    添加到主屏后的标题

3.UC浏览器私有meta属性

<meta name="screen-orientation" content="landscape">

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

<meta name="browsermode" content="application">

<meta name="layoutmode" content="fitscreen">

<meta name="nightmode" content="disable">

<meta name="imagemode" content="force">

  1. ‘screen-orientation’屏幕方向 
    强制页面横屏或竖屏显示 
    content：landscape|portrait
  2. ‘full-screen’全屏 
    进入全屏后，页面隐藏菜单栏, 生成一个悬浮标, 点击悬浮标可显示菜单栏
  3. ‘browsermode’应用模式 
    应用模式是为方便 web 应用及游戏开发者设置的综合开关，通过 meta 标签进行指示打开，当进入应用模式时，长按菜单、默认手势、夜间模式失效
  4. ‘layoutmode’排版模式 
    UC 浏览器供适屏模式及标准模式，其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快。而标准模式则能按照标准规范对页面进行排版及渲染。 
    content：fitscreen|standard
  5. ‘nightmode’禁用夜间模式 
    禁止页面使用 UC 浏览器自定义的夜间模式
  6. ‘imagemode’强制图片显示 
    为了节省流量及加快速度，通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

4.QQ浏览器私有meta属性

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

<meta name="x5-fullscreen" content="true">

<meta name="x5-page-mode" content="default">

  1. ‘x5-orientation’横竖屏控制 
    强制横/竖屏以及跟随浏览器设置【默认】 
    content：landscape|portrait|auto
  2. ‘x5-fullscreen’全屏控制 
    强制全屏以及跟随浏览器设置【默认】 
    content：true|auto
  3. ‘x5-page-mode’ 页面模式 
    普通浏览模式【默认】以及网页应用模式（定制工具栏，全屏显示） 
    content：default|app

 

转载于:https://www.cnblogs.com/vsmart/p/8628479.html

Material-UI create-react-app 创建移动端 H5
读心悦
06-10 421
使用 CSS Grid、Flexbox 或其他响应式布局技术来确保你的页面在不同大小的屏幕上都能正确显示。如果你的应用需要像原生应用一样在移动设备上运行，你可以考虑使用渐进式网络应用（PWA）技术。在不同的移动设备和浏览器上测试你的应用，以确保它在各种情况下都能正常工作。React 和 Material-UI 都已经为此做了很好的支持，但你可能需要根据你的应用需求来添加额外的触摸手势处理。和 Material-UI 来创建移动端 H5 页面时，你需要考虑几个关键点来确保页面在移动设备上表现良好。
移动端h5 meta标签常用配置
晴天有点孤单
05-30 779
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> // 删除苹果默认的工具栏和菜单栏 <meta name="apple-mobile-web-app-status-bar-style" content="black"/> // 设置
h5兼容的页面--移动端常用的meta
qq_37173215的博客
04-16 1330
移动端常用meta整理 工作中遇见需要适应h5的页面。现做下笔记，防止忘记。 移动端常用meta <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
移动端常用的meta属性
Amy_cloud的博客
12-07 614
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" /> //width - 可视区域的宽度，值可为数字或关键词device-width //height - viewport的高度 //initial-scale -
移动端meta标签的属性意义
weixin_42484910的博客
12-09 252
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> viewport：视口, 属性： width/height=数值 devi...
H5 移动端视图meta标签
u010373106的博客
05-06 698
这个属性设置了页面的初始缩放级别，即页面加载时的缩放比例。将其设置为 1.0 表示页面以原始大小显示，没有缩放。: 这个属性设置了用户能够手动缩放的最大比例。将其设置为 2.0 表示用户最多可以将页面放大到原始大小的两倍。: 这个属性设置了用户能够手动缩放的最小比例。将其设置为 0.5 表示用户最多可以将页面缩小到原始大小的一半。: 这个属性告诉浏览器将视口宽度设置为设备的宽度，这样页面会填充整个设备屏幕的宽度，不会有水平滚动条。将其设置为 "yes" 表示用户可以手动缩放页面。1、meta视口标签。
详解搭建一个vue-cli的移动端H5开发模板
11-21
【搭建Vue CLI移动端H5开发模板】 Vue-Mobile是基于Vue CLI构建的一个专为移动端H5开发设计的模板，它提供了一个完整的开发框架，能够帮助开发者迅速启动项目。这个模板采用了以下技术栈： 1. **Vue.js**：轻量级...
响应式蓝色-HTML手机电脑网站-网页源码移动端前端-H5模板-自适应响应式源码.zip
12-25
这套“响应式蓝色-HTML手机电脑网站-网页源码移动端前端-H5模板-自适应响应式源码”是一个为希望快速搭建现代、响应式网站的专业人士设计的优秀资源。它利用了最新的前端技术，提供了一个美观、易用的起点，极大地...
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <th:block th:include="include :: header('JNDI配置管理')" /> </head> <body class="white-bg"> <div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="form-horizontal m"> <div class="form-group"> <div class="col-sm-12"> <textarea id="configContent" class="form-control textarea-inherit" rows="20" placeholder="请输入配置内容，格式：key=value" spellcheck="false"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <button type="button" class="btn btn-primary" onclick="saveConfig()"> <i class="fa fa-save"></i> 保存配置 </button> </div> </div> </div> </div> <th:block th:include="include :: footer" /> <script th:inline="javascript"> var prefix = ctx + "kettle/jndi"; // 页面加载时获取配置 $(function() { loadConfig(); }); // 加载配置内容 function loadConfig() { $.post(prefix + "/getConfig", function(result) { if (result.code == 200) { $("#configContent").val(result.data); } else { $.modal.alertError(result.msg || "获取配置失败"); } }); } // 保存配置 function saveConfig() { var content = $("#configContent").val(); if (!content) { $.modal.alertWarning("配置内容不能为空"); return; } $.post(prefix + "/saveConfig", { content: content }, function(result) { if (result.code == 200) { $.modal.alertSuccess("保存成功"); loadConfig(); // 重新加载配置 } else { $.modal.alertError(result.msg || "保存失败"); } }); } </script> <style> .textarea-inherit { font-family: Consolas, Monaco, monospace; font-size: 14px; line-height: 1.5; padding: 10px; border: 1px solid #e5e6e7; border-radius: 3px; resize: vertical; } </style> </body> </html> 若依框架风格，改下这个html，要求打开页面后内容加载显示在文本域中，保留原有的换行格式，编辑保存
最新发布
08-14
<h5>JDBC配置管理</h5> </div> <div class="ibox-content"> <div class="form-horizontal"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label class="col-sm-2 control-label">...
[前端]Web前端-移动端开发知识点及常用适配方案
deathz15的博客
12-01 2229
文章目录一、前端开发常用单位1.像素(Pixel)2.百分比3.em4.rem5.vw(Viewport Width)和vh(Viewport Height)二、视口三、设备像素和CSS像素1.什么是设备像素和CSS像素?2.如何解决设备像素和CSS像素不一样的问题?3.获取设备像素比DPR(Device Pixel Ratio)四、常用移动端适配方案1.通过media媒体查询2.通过media媒体查询+rem3.通过JS+rem4移动端开发适配方案之终极方案相关文献 一、前端开发常用单位 1.像素(Pix
H5关于meta设置，以及IOS底部兼容
xiaopeng_han123的博客
12-15 1983
IOS底部安全区域配置，移动端meta设置
h5应用如何适配移动端(干货总结)
qq_48896417的博客
04-13 4748
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。
meta 标签内属性及详解
QLF19的博客
07-26 247
属性值为content，content参数有all,index搜索引擎将索引此网页，follow继续通过此网页的链接索引；后面的分号是在秒数的前面和网址的后面；none将忽略此网页；nofollow搜索引擎不继续通过此网页的链接索引搜索其他的网页；13.Set-Cookie用于cookie的设定，如果网页过期，那么存盘的cookie将被删除；14.Window-target显示窗口的设定，强制页面在当前窗口以独立页面显示；15.content-Type显示字符集的设定，设定页面使用的字符集；
meta name="format-detection" content="telephone=no"
热门推荐
飞鸿的博客
06-16 1万+
当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。比如：在 iPhone 上默认值是：&lt;meta name="format-detection" content="telephone=yes"/&gt;如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：&lt;meta name="format-detection" con...
HTML5头部meta标签的一些常用属性
暮云归@技术人生
06-11 462
<!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <meta name="keywords" content="" /> <!-- 说明 --> <meta name="description" content="" /> <!-- 作者 --> <meta name="author" content="" /> &lt...
meta name="apple-mobile-web-app-capable"
2shou
09-16 4094
移动端学习笔记（一）
anran_1211的博客
08-02 333
viewport：视口（可视区窗口） 默认不设置viewport一般可视区宽度在移动端是980 width：可视区域的宽度（number || device-width） user-scalable：是否允许用户缩放，如果user-scalable = no，则说明不可以缩放 user-scalable = yes，允许用户缩放（iOS10无效） 默认字体设置：Helvetica 清除点击的阴影：-webkit-tap-highlight-color 消除按钮圆角：-webkit-appearance ，如
QQ浏览器X5内核问题汇总
hualimeme的专栏
06-05 3334
转载：http://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 常常被人问及微信中使用的X5内核的问题，其实我也不是很清楚，只知道它是基于android 4.2的webkit，版本号是webkit 534。今天正好从X5团队拿到了一份问题汇总，梳理下发出来，给各位开发者以参考——不排除明天会删除这篇文章的可能。 1.And
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值