移动端重构系列1——新建空白页面

移动端重构系列-mobile

本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo

html5文档申明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

meta标签

<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" />

viewport

视图窗口，移动端特属的标签。一般使用下面这段代码即可：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。

width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000
initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // float_value，允许用户缩放到的最小比例
maximum-scale – // float_value，允许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否可以手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

注：target-densitydpi屏幕像素密度和缩放有关，你可以试试修改这个demo，用手机看下实际效果。我一般不设置这个属性。

apple-mobile-web-app-capable

是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。

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

apple-mobile-web-app-status-bar-style

当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

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

注：如果对apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查阅下面的参考资料第三篇文章，里面有截图说明。

telephone & email

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

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

同样还有一个email识别

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

当然两者可以写在一起

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

其他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">

参考资料：

link标签

apple-touch-icon

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

以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

图标使用的优先级如下：

  • 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
  • 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
  • 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下以apple-touch-icon为前缀的png图标。

注：ios7不再为icon添加特效，ios7以前则默认为icon添加特效，除非icon有关键字-precomposed.png为后缀。

参考资料：

apple-touch-startup-image

同样基于apple-mobile-web-app-capable设置为yes，可以用WebApp设置一个类似NativeApp的启动画面。

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

和apple-touch-icon不同，apple-mobile-web-app-capable不支持sizes属性，所以使用media来控制retina和横竖屏加载不同的启动画面。

// 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" />

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

// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

参考资料：

总结

空白页面模板，然后再根据具体情况在此基础上添加apple-touch-icon和apple-touch-startup-image

<!DOCTYPE html>
<html>
<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>Document</title>
</head>
<body>

</body>
</html>

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html

时间： 2024-10-26 03:18:20

移动端重构系列1——新建空白页面的相关文章

移动端重构系列6——图标

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 这里我们把图标分为三种:背景图片,直接绘制,@font-face.如无特殊情况,图标的标签采用i标签 背景图片 首先我们会选择sprite形式,把所有的图标都放在一个大图中,然后考虑到retina屏,所以我们的图标应该设计为实际大小的2倍,然后设置background-size为实际大小.以下面的msg icon为例: 图中的每个icon大小为24px,实际应用时,我们是以12px来使用的: %icon-msg{

移动端重构系列3——重置样式

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo 基于Normalize.css,根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式. html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-si

移动端重构系列5——切入切出动画

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 因为后面的几篇文章都需要用到切入切出动画什么的,所以先把这个说下.为了简单起见,我们这里只讨论translate偏移动画(translate比起绝对定位的top/left/right/bottom要高效),而如其他的旋转缩放淡入淡出什么的道理都一样. transition动画 先定义要运动的元素在视觉范围之外,以左方向进入为例,同时定义transition: .demo{ @include translate3D(

移动开发 新建空白页面

移动端重构系列 <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-we

移动端-新建空白页面meta各个标签详细解读

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> meta标签 <meta name="viewport" content="width=device-width, i

移动端重构系列-移动端html页面优化

对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化,或许对你有帮助和启发. 概述 1. PC优化手段在Mobile侧同样适用      2. 在Mobile侧我们提出三秒种渲染完成首屏指标      3. 基于第二点,首屏加载3秒完成或使用Loading      4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB      5. Mobile侧因手机配置

移动端重构系列11——弹窗modal

copy from http://www.w3cplus.com/mobile/mobile-terminal-refactoring-modal.html 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 设计结构如下: <header class="header"></header> <div class="wrap-page"> <section class="page"></sect

移动端重构系列12——popup

转载自http://www.w3cplus.com/mobile/mobile-terminal-refactoring-popup.html popup分为两种:一种是内容比较多,直接以全屏显示,如图一:一种是少量内容的popup提示,如图二 先上demo: popup测试 popup page 第一种形式,设计结构如下: <header class="header"></header> <div class="wrap-page"&

学习ASP.NET Core Razor 编程系列七——修改列表页面

学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET C