巩义网站制作专业品牌! 宇程网络-巩义企业网站专业服务商 加入收藏
巩义网站制作会员登录
注册
巩义市宇程网络有限公司巩义做网站,找宇程网络! 巩义网站设计热线 巩义网页设计在线咨询
技术交流
网站建设
服务器
网站安全维护
域名注册
虚拟主机
站长之家
网站推广
企业邮局
数据库
 
巩义做网站,找宇程网络!
巩义市宇程网络成立于二零零四年,是家专业提供巩义网站制作巩义网页设计巩义网页制作巩义网站设计巩义网站开发、域名注册、虚拟主机、企业邮箱等服务的正规巩义做网站的公司,迄今已累积客户逾千家,在业界具有相当的知名度,在巩义网站建设市场上树立了良好的口碑。
业精于专,值得您的信赖!
销售热线:13949060853
查看更多联系方式
心得技巧
巩义手机网站开发之meta篇 - 河洛渔人

<META name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=0">

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。  

  1. width=device-width :表示宽度是设备屏幕的宽度
  2. initial-scale=1.0:表示初始的缩放比例
  3. minimum-scale=0.5:表示最小的缩放比例
  4. maximum-scale=2.0:表示最大的缩放比例
  5. user-scalable=yes:表示用户是否可以调整缩放比例
  6. 如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:
  7. [html] view plaincopy
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
  9. 这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了
  10. html5开发的wap网站这三个分别代表什么含义?
  11. <meta name="MobileOptimized" content="240"/> //浏览器不会自动调整文件的大小,不会随着浏览器拉伸缩放。
  12. <meta name="apple-touch-fullscreen" content="YES" />"添加到主屏幕“后,全屏显示
  13. <meta name="apple-mobile-web-app-capable" content="yes" />
  14. 如果内容设置为YES,Web应用程序运行在全屏模式;否则,它不会。默认行为是使用Safari浏览器显示网页内容
  15. <meta name="apple-mobile-web-app-capable" content="yes" />

是否删除默认的苹果工具栏和菜单栏

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

  当设置了app形式之后,作用是控制状态栏显示样式,但是本机ios7测试之后没啥改变……不解

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

iphone会把一串数字识别为电话号码,点击的时候会提示是否呼叫,屏蔽这功能则把telephone设置为no,

要启用电话功能,请使用<a href="tel:13888888888">Call Me : 13888888888</a>来代替,

邮件则为<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

  • 其他的meta设置
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- 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">

此外,apple还有两个有趣的标签:

  1. apple-touch-icon

< link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">

如果 apple-mobile-web-app-capable设置为 yes了,那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。而设置相应 apple-touch-icon标签,则添加到主屏上的图标就会使用我们指定的图片。

   2. apple-touch-startup-image

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

基于 apple-mobile-web-app-capable设置为 yes,可以为WebApp设置一个类似NativeApp的启动画面。和 apple-touch-icon不同, apple-mobile-web-app-capable不支持sizes属性,要使用media来加载不同的启动画面。 。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

所以,对于移动端,把通用的起始模板写成sublime的snippet:

<snippet>
  <content><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection"content="telephone=no, email=no" />
  <title>${1}</title>
</head>
<body>
  ${2}
</body>
</html>
]]></content>
  <tabTrigger>mhd</tabTrigger>
  <description>Mobile Frame</description>
  <scope>text.html</scope>
</snippet>

  • 下一个技术中心: 没有了


  • 技术交流 网站模板上线
    巩义手机网站开发之meta篇 - 河洛渔人
    开发微网站平台遇到:模板不存在[./t…
    如何取消网站服务器/主机空间目录脚本…
    网站备案注销 网站备案号怎么注销
    制作网站如何让div层在视野屏幕里相对…
    畅味园
    婚纱摄影公司网站
    婚庆服务公司网站
    婚庆公司网站
    婚庆公司网站
     

    巩义做网站1500元优惠专题 | 网站首页 | 公司简介 | 新闻动态 | 超值套餐 | 经典案例 | 技术支持 | 联系方式 | 虚拟主机
    Copyright @ 2004-2013 巩义宇程网络 www.5ctx.com All Rights Reserved. 豫ICP备09044223号
    联系电话:13949060853 (QQ:383298229)
    宇程网络: 巩义网站制作公司 | 巩义网页设计公司 | 巩义网页制作公司 | 巩义网站设计公司 | 巩义网站建设公司 | 巩义网站开发公司 | 巩义做网站的公司