整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML:meta标签的各种用法汇总

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

1.name="viewport" //设置视口(网页可绘制的区域)

2.width=device-width //应用程序的宽度和屏幕的宽度是一样的

3.height=device-height //应用程序的高度和屏幕的高是一样的

4.initial-scale=1.0 //应用程序启动时候的缩放尺度(1.0表示不缩放)

5.minimum-scale=1.0 //用户可以缩放到的最小尺度(1.0表示不缩放)

6.maximum-scale=1.0 //用户可以放大到的最大尺度(1.0表示不缩放)

7.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序,使应用程序的尺度发生一个改变(yes/no)


二、

<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no">

1.target-densitydpi=device-dpi //指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放.( dpi是单位,一般指每英寸的像素)


三、

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

//说明:网站开启对web app程序的支持

1.apple-mobile-web-app-capable //

2.content="yes" //是否开启(开启)


四、

<meta http-equiv="X-UA-Compatible" content="IE=edge">

//强制使用ie最新内核模式渲染


五、

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

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接

在 iPhone 上默认值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

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


六、

<meta content="email=no" name="format-detection" />//将不识别邮箱,告诉设备忽略将页面中的数字识别为电话号码 。


七、

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

在web app应用下状态条(屏幕顶部条)的颜色;

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

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


八、

<meta name="apple-touch-fullscreen" content="yes">

//"添加到主屏幕“后,全屏显示


九、

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

//这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。


十、

苹果web app其他设置:

1).<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

说明:这个link就是设置web app的放置主屏幕上icon文件路径。

使用:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)。

2).<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

使用:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。


十一、

<META NAME="MobileOptimized" CONTENT="240">

//浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。

想了解更多,请关注订阅我们的头条号:IT点点滴,每天更新一篇您身边的IT点点滴

PConline 资讯】虽然安卓并没有如同iOS、Ubuntu Mobile那样原生自带大量手势,但通过第三方App,安卓也能够用手势实现大部分操作。安卓上最好的手势App是什么呢?GMD当仁不让!GMD是安卓上功能最强的手势App,安装GMD后,安卓甚至可以实现比iOS更强大的手势功能。现在GMD发布了8.0新版,带来了全新的设计,更适合安卓5.0使用。

软件名称:GMD手势控制
软件版本:8.0.0
软件大小:3.46MB
软件授权:免费
适用平台:Android
下载地址:http://dl.pconline.com.cn/download/78219.html

GMD 8.0新版,使用全新设计的Material Design界面

GMD 8.0使用了安卓5.0的Material Design设计,更适合安卓5.0使用。在功能方面,GMD 8.0一如既往地强,可以自定义手势轨迹,实现各种操作。比如说你可以利用自定义的手势开启特定App,也可以利用自定义手势实现返回桌面等功能。如果你用的是安卓平板,GMD带来的各种手势更是不容错过。

功能依然强大

GMD 8.0需要root权限才能完美发挥作用,现在安卓5.0、5.1都已经可以通过刷入Super Su直接实现root,GMD 8.0用起来应该问题不大。

【推荐】用PConline官方客户端下载

本文中,我们将讨论跨浏览器兼容性的重要性,探讨该领域的常见问题、最佳实践和新兴趋势。

浏览器兼容性是一个术语,指的是特定网站和应用程序在不同浏览器上完全正常运行的能力。在这个现代数字世界中,企业严重依赖其在线形象来吸引和留住客户,因此网站应该可以跨不同的设备和浏览器访问,以确保无缝的用户体验。

不同的浏览器应该与网站的 HTML、CSS 和 JavaScript 兼容。在本文中,我们将讨论跨浏览器兼容性的重要性,探讨该领域的常见问题、最佳实践和新兴趋势。

什么是浏览器兼容性测试

浏览器兼容性测试是一种非功能性测试,可确保所有功能在不同的浏览器(如 Microsoft Edge、Google Chrome、Safari 等)上正常工作。由于所有浏览器都有自己的配置和代码解释,因此浏览器兼容性确保了应用程序的一致性。但是,由于兼容性问题,网站在不同的浏览器上可能会有不同的反应,此时,浏览器兼容性测试对于确保完美的用户体验起着至关重要的作用。

浏览器兼容性如何工作?

市场上有多种 Web 浏览器,每个浏览器都有其渲染引擎和对 Web 技术的解释,确保您的 Web 浏览器在它们之间一致地工作可能是一项复杂的任务。这可以通过使用 Web 标准来完成,这些标准是关于如何对网页进行编码的商定指南。当浏览器遇到根据 Web 标准编码的网页时,它应该能够正确呈现该页面,而不管浏览器自己对这些标准的实现如何。

每个浏览器都有自己的渲染引擎,用于解释 HTML、CSS 和 JavaScript 代码,并将其呈现为用户可以与之交互的可视化表示形式。例如,Google Chrome 使用 Blink,Mozilla Firefox 使用 Gecko,而 Safari 使用 WebKit。

为确保跨浏览器兼容性,Web 开发人员和设计人员必须在不同的浏览器上测试他们的网站,以识别和修复任何差异或错误。他们还可以使用工具和框架来帮助简化测试过程并确保不同浏览器之间的兼容性。

要避免的常见跨浏览器兼容性问题?

为确保流畅的跨浏览器体验,您需要了解与开发相关的最常见的跨浏览器兼容性问题。

  • 不同的CSS渲染:不同的浏览器采用不同的 CSS 规则。它会导致不一致的布局、不必要的空格和正面渲染。为了避免这些类型的故障,开发人员需要依靠符合标准的 CSS 来获得一致的渲染。
  • 与 JavaScript 的兼容性:JavaScript 的行为可能因不同的浏览器而异。即使在今天,一些最新的 JavaScript 功能也不受旧浏览器的支持,或者需要 polyfill 或转译器才能工作。
  • 绕过不支持的 HTML5 和 CSS3 功能:有时,许多浏览器不支持最新的 HTML5 和 CSS3 功能。使用不受支持的功能可能会导致某些浏览器中的布局损坏或功能丢失。为防止出现这种情况,请研究并了解目标浏览器支持哪些 HTML5 和 CSS3 功能。
  • 触摸和手势问题: 移动浏览器以不同的方式处理触摸和手势事件,这可能会影响触摸友好型网站的可用性。
  • 特定于浏览器的错误:某些浏览器可能包含一些错误,这些错误可能会在将来造成重大故障。因此,删除这些错误以维持最佳用户体验非常重要。

实现跨浏览器兼容性的最佳实践

跨浏览器兼容性测试的主要目标是标记和解决用户从不同应用程序访问您的网站时的错误和错误。确保您的网站或 Web 应用程序正常运行并在不同的 Web 浏览器和版本中一致地显示至关重要。

以下是一些关键注意事项:

  • 定义浏览器和设备矩阵:您需要通过考虑目标浏览器版本在不同设备和平台上的工作来识别它们。您还需要创建一个矩阵来列出目标受众可能使用的所有目标浏览器及其各种版本。
  • 框架封装:使用框架来封装代码是开始开发网站的好方法。框架提供了许多优势,包括针对跨浏览器问题进行优化和自动创建响应式元素。通过使用框架,开发人员可以专注于功能,而将跨浏览器兼容性问题留给框架。
  • 使用自动化测试工具:Selenium、Cypress 和 TestGrid 等自动化测试工具可以显著加快跨浏览器兼容性测试过程。这些工具可以同时在各种浏览器上测试网站,而无需手动干预。
  • 开发代码验证通道:此步骤涉及 W3C 标准。经过充分验证的代码使网站兼容,并最大限度地降低因语法错误或非标准做法而引起的问题的风险。
  • 重测和回归:添加重新测试和回归测试通道有助于开发人员修复兼容性问题。每当引入更改或更新时,在定义的浏览器和设备矩阵中重新测试网站有助于及早识别和解决任何潜在的兼容性问题。
  • 设置一些反馈循环:设置一些反馈循环,以确保您的网站在不同的浏览器和设备上都能正常运行。通过“报告错误”按钮鼓励用户反馈,并及时响应用户报告。用户反馈充当实际验证机制,帮助您识别和纠正隐藏的兼容性挑战。

结论

随着数字世界不断发展和更新,新版本和设备变得过时,跨浏览器测试对于确保网站和 Web 应用程序按预期工作至关重要。在今天的这篇文章中,我们了解了浏览器兼容性及其重要性以及与之相关的问题。跨浏览器兼容性是一个持续的挑战,但通过正确的方法和最佳实践,我们可以在未来使其更加多样化和动态。