移动端页面不需要在meta加_整理一下移动端的一些常用 <meta>

最新推荐文章于 2021-05-25 14:37:07 发布
最新推荐文章于 2021-05-25 14:37:07 发布
阅读量256 收藏
点赞数
文章标签： 移动端页面不需要在meta加
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39834205/article/details/111492332
版权

一、html中meta标签meta标签是什么？META标签是HTML语言HEAD区的一个辅助性标签

meta标签是干什么用的？META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但却是文档的最基本的元数据.

二、一些移动端页面常用的

1、标注作者

2、在浏览器中页面将以原始大小显示，并不允许缩放

在使用手机浏览网页的时候，我们可以发现，浏览器会自动将页面等比例缩小的屏幕适配的页面，同时我们可以通过手指来缩放页面。但当我们制作移动端页面时，这个功能很显然已经失去意义。所以使用这个标签可以禁止缩放。

width:viewport的宽度(范围从200到10,000，默认为980像素)

height:viewport的高度(范围从223到10,000)

initial-scale:初始的缩放比例(范围从>0到10)

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

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

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

3、在浏览器中页面中出现的手机号码将不以拨号的超链接的形式出现

当你写了一串数字怎么就变成超链接了，点击还能拨打电话呢。因为iPhone会自动把你这个文字加链接样式，通过使用这个标签可以取消这一功能。默认是开启状态。

4、不识别页面中出现的邮箱

遇上一条同理，告诉设备不识别邮箱，点击之后不自动发送

5、是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

6、设置苹果工具栏颜色

apple-mobile-web-app-status-bar-style的content默认值为default(白色)，可以定为black(黑色)和black-translucent(灰色半透明)。

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)

7、如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示

weixin_39834205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端常见meta设置
wf2017的博客
02-19 2577
设置meta
移动端专用的meta标签设置大全
09-22
不知道有没有人觉得，html的meta标签描述的头部信息特别多，下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起...
移动端页面不需要在meta加_移动端开发需要加的meta
weixin_39975366的博客
12-19 91
移动端开发需要加的meta和常用的css3媒体查询样式，移动开发中头部要加的一些常用meta。css 适应不同手机@media only screenand (min-device-width:320px)and (max-device-width:480px)and (-webkit-min-device-pixel-ratio:2){}iphone 5 and 5s@media only sc...
移动端meta设置大全
DJ老邓的博客
11-23 509
声明文档使用的字符编码 <meta charset='utf-8'> 强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 必须联网才可以访问,禁止浏览器从本地计算机的缓存中访问页面内容 <meta http-equiv="Cache
android meta 标签作用,视口meta标签真的必要吗？
weixin_34983902的博客
05-25 116
慕斯王在台式机操作系统上，浏览器视口是固定数目的像素宽，并且网页内容按原样呈现在其中。从iOS上的Safari(或当时我们称为iOS的任何版本)开始，移动浏览器的视口一直是“虚拟的”。尽管视口仅可能(例如)占用界面中320个物理像素的空间，但浏览器会创建一个更大的“虚拟”视口(我认为iOS上默认为980像素)，并在那里显示内容，然后缩小该虚拟视口，直到它适合设备屏幕上可用的实际物理像素为止。视口m...
手机，移动端开发，需要加的meta标签
qq_26069551的博客
05-23 220
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
移动端html5 meta标签的神奇功效
09-28
制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的地方以外，就是 Meta 标签的设置，合理设置 Meta 标签 对手机版网站的搜索引擎优化，手机浏览器的渲染展示都有非常大的帮助
基于Swiper实现移动端页面图片轮播效果
08-28
<meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type=...
移动端页面不需要在meta加_浅析移动端测试踩过的坑
weixin_39732609的博客
12-04 74
测试从业者应该知道软件测试需要在不同操作系统下测试软件，如果测试前端业务更多的就是pc端和移动端，pc实现的方式用的最多就是HTML+css组成的网页和一些效果，而移动端更多的是在移动终端运行的app那么实现的方式就有很多种如 原生开发，混合开发等，就目前行业流行的更多的就是混合开发的实现方式对于移动终端的测试我们更多的是从功能测试和性能测试两个方向对软件进行测试，这里简单介绍一下混合开发的注意的...
移动端如果没有meta标签的viewport
weixin_34061042的博客
03-11 253
1、场景如下1.1 注释掉 mata name=viewport<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-sca...
HTML5做移动端的项目添加meta
ddh3110的博客
06-24 175
在HTML5的项目中，移动端需要添加这个meta，用于设置屏幕和设备等宽度以及是否运行用户缩放，及缩放比例的问题。 　　<meta name='viewport' content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 转载于:https://www.cnblogs.co...
移动端适配方案之viewport适配
wuxing164的博客
11-23 607
#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.
移动端声明及meta标签设置
热门推荐
Li_blog的博客
08-04 3万+
移动端meta标签设置1.设置当前html文件的字符编码<meta charset="UTF-8">2设置浏览器的兼容模式（让IE使用最新的浏览器渲染）<meta http-equiv="X-UA-Compatible" content="IE=edge"/>3.视口（快捷键：meta:vp）<meta name="viewport" content="maximum-scale=1.0,minim
移动端禁止网页缩放meta标签
qq_43292127的博客
12-21 1224
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt; meta标签中的content属性里有一个width=device-width的值，这个值就是用来告诉浏览器，该页面将要使用设备的宽度来解析，后面的属性值则是告诉该页面： use...
移动终端H5页面meta标签的设置案例
jingsi1991的博客
12-02 1万+
一、天猫<title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl
如何禁止百度自动转码？
江西SEO-曾庆平
04-11 4361
如何禁止百度自动转码？百度移动搜索引擎为了更好地满足用户需求，会对移动搜索结果中的网页进行转码处理，如果站长不希望自己网站的网页被转码、依然希望手机端用户浏览PC页该如何操作呢？当然这些内容并非平台原创，是根据百度移动在无线端发布的公告声明改写的，由于移动的同事仅在无线端进行了发布，导致很多站长反映在PC端查不到百度的官方声明，同时网络上也发现了很多非官方方法，虽然短时期内的确有效，但从长远来看效...
移动终端H5页面meta标签的设置
weixin_39818813的博客
04-01 592
&lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"&gt;&lt;meta content="yes" name="apple-mobile-web-app-capable"&gt;&lt;meta content=&quot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var wd = parseInt(document.documentElement.clientWidth+20)/10; document.getElementsByTagName("html")[0].style.fontSize = wd + "px";//给不同设备的html设置不同的字体大小 </script> <script src="./watermark2.js"></script> </head> <body> <div id="test">rrr</div> </body> <script> watermark.load({ watermark_txt: "test" + "-" + "752318", }); </script> </html> 以上代码使用watermark插件在pc端可显示水印，但切换移动端无法显示水印请分析原因并修正代码示例
最新发布
07-25
根据你提供的代码，问题可能出在动态计算字体大小的代码上。移动设备的屏幕宽度可能会影响计算结果，导致字体大小不正确。尝试使用`window.innerWidth`获取窗口宽度来计算字体大小，并修改代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var wd = parseInt(window.innerWidth + 20) / 10; document.getElementsByTagName("html")[0].style.fontSize = wd + "px"; </script> <script src="./watermark2.js"></script> </head> <body> <div id="test">rrr</div> <script> watermark.load({ watermark_txt: "test" + "-" + "752318", }); </script> </body> </html> ``` 这样，根据移动设备的窗口宽度动态计算字体大小后，再加载水印，应该可以在移动端正确显示水印了。请确保`watermark2.js`文件路径正确。如果问题仍然存在，请检查浏览器开发者工具中是否有相关报错信息，并确保插件文件正确引入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值