head之间的一些meta和屏幕自适应的一些元素

最新推荐文章于 2022-04-14 08:34:59 发布
原创 最新推荐文章于 2022-04-14 08:34:59 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#自适应 #web移动自适应 #字体自适应

本文介绍了在WebApp开发中至关重要的几个Meta标签，包括用于控制视口尺寸和比例的标签、实现全屏模式浏览的标签、调整状态栏样式的标签及防止数字被误识为电话号码的标签。

meta标签，这些meta标签在开发web app时起到非常重要的作用

(1)<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />

(2)<meta content=”yes” name=”apple-mobile-web-app-capable” />  //允许全屏模式浏览

(3)<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

(4)<meta content=”telephone=no” name=”format-detection” />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
 

忽略将页面中的数字识别为电话号码

HTML5与移动端web学习笔记

忽略Android平台中对邮箱地址的识别

HTML5与移动端web学习笔记

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对iOS的safari

HTML5与移动端web学习笔记

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

HTML5与移动端web学习笔记

其中：
width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
 
在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念

是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari

 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不

是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。


禁止横屏： 
<!-- 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-fullscreen" content="true">


<!-- UC应用模式 -->
<meta name="browsermode" content="application">


<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">


<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

字体字适应：(vw为自适应)

字体属性： font-size: 20px;


100% = 1em = 1rem = 16px = 12pt

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

图片自适应：

响应式图片srcset全新释义sizes属性w描述符

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo." />

移动端与大屏幕自适应适配方案
weixin_53068161的博客
03-13 2992
vue3+cli4.x+lib-flexible+px2rem-loader的移动端与大屏幕适配方案前言一、安装并配置相应插件1.安装lib-flexible与postcss-pxtorem2.配置lib-flexible与postcss-pxtorem配置 postcss-pxtorem 设置页面px自动转换为rem按需修改 lib-flexible 源码配置二、设置移动端适配三、注意问题 ...
几个meta属性让页面自适应手机屏幕
yeyinshi的专栏
01-10 1722
几个meta属性让页面自适应手机屏幕
vue2 移动配置 meta 的 viewport 控制移动端屏幕自适应的方法
完备创新
04-14 3506
问题描述： 在移动端开发时，遇到需要设置移动端自适应全屏的时候，发现这个功能，和普通的HTML不一样，不是每个页面都有这个配置后，网上进行百度了一圈发现没有类似的标题的文章，可能每个人的理解不一样吧，哈哈，这个算是融合之前比较简单的方法，其实还有很多方法。 欢迎给出建议和意见完善文章，让更多人的不走弯路。 方法一（比较简单）： 1.找到vue目录下的index.html文件，进行修改，如下图 代码如下： <meta name="viewport"...
pc端实现 网页居中显示 且自适应
weixin_30763455的博客
05-25 764
通过给最外层添加绝对定位和translate(-50%,-50%) scale（ratio）来实现居中且适度缩放。 <!DOCTYPE html > <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ...
网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中
CRPER
05-31 3610
flex实现子块的完美居中方案父块使用display:flex属性,子块margin自适应即可实现代码index.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;}
html meta页面自适应,【转载·收藏】 html5手机网站自适应需要加的meta标签
weixin_31640385的博客
06-04 507
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放下面是对于这个标签的具体说明:viewport 语法介绍：content包含有以下几个属性:height= [pixel_value |device-height] ,width= [pixel_value | device-width ] ,initial-scale...
精选资源
Unity打包Webgl端进行 全屏幕自适应
06-01
这段CSS代码设置了`body`元素和`canvas`元素（Unity的渲染区域）全屏显示，移除了默认的边距和填充，同时隐藏了滚动条以防止出现不必要的滚动行为。 四、JavaScript交互 除了CSS之外，我们可能还需要在`index.html`...
精选资源
css和css3弹性盒模型实现元素宽度（高度）自适应
01-19
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>自适应</title> <style> *{ padding: 0; ...
使用swiper插件，实现轮播效果，banner自适应各种屏幕和手机大小
08-02
6. Responsive：响应式设计，使Swiper能在不同设备和屏幕尺寸上正常工作。 二、Swiper安装与引入 1. 下载：你可以从Swiper官网或者npm获取最新版本的Swiper资源，包括CSS和JS文件。 2. 引入：将下载的CSS和JS文件...
html通用屏幕自适应
最新发布
07-03
5. **图片和媒体的自适应处理** 使用 `max-width: 100%` 和 `height: auto` 可以确保图片在不同屏幕下不会溢出容器。 ```css img { max-width: 100%; height: auto; } ``` 6. **断点设置（Breakpoints）** ...
谈一下图片的自适应
菜鸟的博客
10-10 4292
在工作中经常遇到要求图片自适应的需求，下面就谈一下我在工作中经常使用的一些方法 单独使用img标签的情况 单独使用img的时候，可以只设置width就可以了，height不用设置，因为img不设置height，它会自动根据图片的比例设置自适应高度 例如： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" .
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1541
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
HTML5使用meta标签自适应的方法
weixin_41950078的博客
11-21 8064
使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 视是用户网页的可视区域。翻译为中文可以叫做“视区”。 手机浏览器是把页面放在一个虚拟的“窗口”，（视口）比屏幕宽，这样就不用把每个网页挤到很小的窗口中这样会破坏没有针对手机浏览器优化的网页的布局），...
浅谈meta viewport设置移动端自适应
热门推荐
筱葭的博客
03-06 5万+
1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为
页面Header自适应屏幕
weixin_34234823的博客
05-29 1151
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten...
页面加载自动生成meta标签，做屏幕自适应功能
John的专栏
09-22 1077
/** * * viewport scale根据设备像素比自动生成 * Html根元素font-size根据设备像素比自动生成 * by MC */ (document.DOMContentLoaded = function () { var meta = document.createElement("meta"), scale = 1.0 / window
html5手机网站需要加的那些meta标签，手机网站自适应
Cui55的专栏
12-09 4万+
1、移动网站要加的html5相关meta和标签     a、         网页宽度默认等于屏幕宽度（width=device-width），     初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。     b、         c、         d、         e、           f、
HTML中设置网页自适应的MATE标签
洛阳梁朝伟的博客
07-21 1万+
一、 1.name="viewport"      //设置视口（网页可绘制的区域） 2.width=device-width    //应用程序的宽度和屏幕的宽度是一样的 3.height=device-height  //应用程序的高度和屏幕的高是一样的 4.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放） 5.mini
写移动端自适应屏幕的方法
吴小迪的博客
04-14 4万+
前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的，今天给大家推出另外一种自适应不同移动端的方法，使用vw，vh单位。 vw和vh单位的大小是多少？ vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh， 你设置的50vw就是相当于设备宽度的50%，你设置的100vh就是相当于设备高度的100%。 切记：不要把vw和vh弄混淆了，如果你给元素宽度设置...
加入对电脑和手机屏幕自适应功能
04-09
<think>好的，我需要帮助用户实现响应式设计，适配电脑和手机屏幕。首先，根据用户提供的引用内容，特别是引用[2]，里面有提到CSS媒体查询和流动布局。这些都是响应式设计的核心技术，所以应该从这些方面入手。 用户可能不太熟悉具体的技术细节，所以需要分步骤讲解，结构要清晰。首先应该解释什么是响应式设计，然后列出关键步骤。每个步骤需要具体说明，比如媒体查询的使用方法、流动布局的实现，还有视口设置的重要性。另外，弹性盒布局和网格布局也是现代响应式设计常用的方法，应该包括进去。 然后，图片和媒体的自适应处理也很重要，用户可能不知道如何让图片在不同设备上自动调整。需要提到使用max-width: 100%和object-fit属性。另外，移动端触控优化可能容易被忽略，比如按钮大小和间距的调整，这也是提升用户体验的关键点。 测试部分也不能少，用户可能不知道如何测试响应式效果，可以建议使用浏览器开发者工具或者真机测试。最后，提供一个代码示例，展示如何将这些技术整合在一起，这样用户可以直接参考实现。 需要确保回答符合系统级指令，比如正确使用LaTeX格式，不过这个问题主要涉及前端技术，可能数学公式不多，但如果有变量或代码，要正确使用格式。还要生成相关问题，这部分需要根据响应式设计的常见疑问来提出，比如性能优化、框架选择、常见问题处理等。 最后检查引用标记是否正确，确保引用了提供的引用[1]和[2]，特别是媒体查询和流动布局的部分要正确标注。整体结构要符合用户的要求，分步骤、代码块、注意事项等，让回答既专业又易懂。</think>以下是实现响应式设计以适配不同屏幕的核心方法，结合代码示例和关键步骤说明： ### 一、响应式设计核心方法 1. **视口元标签设置** 在HTML头部添加： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 确保页面根据设备宽度自动缩放[^2] 2. **CSS媒体查询实现** ```css /* 移动端（<768px） */ @media (max-width: 767px) { .container { padding: 10px; } } /* 平板（768px-991px） */ @media (min-width: 768px) and (max-width: 991px) { .container { max-width: 720px; } } /* 桌面端（≥992px） */ @media (min-width: 992px) { .container { max-width: 960px; } } ``` 3. **流动布局实现技巧** ```css /* 使用百分比和rem单位 */ .sidebar { width: 25%; padding: 1rem; } .main-content { width: 75%; font-size: calc(1rem + 0.5vw); } ``` ### 二、进阶适配方案 1. **弹性盒布局（Flexbox）** ```css .container { display: flex; flex-wrap: wrap; gap: 20px; } .item { flex: 1 1 300px; /* 最小宽度300px */ } ``` 2. **CSS网格布局** ```css .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } ``` 3. **图片自适应处理** ```css img { max-width: 100%; height: auto; object-fit: cover; } ``` ### 三、移动端优化要点 1. **触控目标尺寸** ```css button { min-width: 48px; min-height: 48px; padding: 12px; } ``` 2. **响应式表格处理** ```css @media (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } td::before { content: attr(data-label); float: left; font-weight: bold; } } ``` ### 四、测试与调试 1. 使用Chrome DevTools设备模拟器 2. 真机测试不同DPR（设备像素比） 3. 验证断点有效性： $$ \text{断点有效性} = \frac{\text{适配设备数}}{\text{总测试设备数}} \times 100\% $$ ### 代码示例（完整响应式页面框架）： ```html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 15px; } .card { background: #f5f5f5; padding: 20px; border-radius: 8px; } @media (max-width: 600px) { .card { margin-bottom: 15px; } } </style> </head> <body> <div class="container"> <div class="card">内容区块1</div> <div class="card">内容区块2</div> <div class="card">内容区块3</div> </div> </body> </html> ``` ### 注意事项 1. 优先使用移动端优先设计策略 2. 避免固定像素值，改用rem/em单位 3. 使用vmin/vmax单位处理极端比例屏幕 4. 结合CSS变量管理断点： ```css :root { --mobile: 600px; --tablet: 1024px; } ``` 相关问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值