学步园

1. viewport：

也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，

这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;

实际上我们可以操作的属性有4 个：

?

width
-             // 
viewport 的宽度 （范围从200 到10,000，默认为980 像素）

height
-            // 
viewport 的高度 （范围从223 到10,000）

 

initial-scale
-     // 
初始的缩放比例 （范围从>0 到10）

 

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

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

 

user-scalable
-    //  
用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：

?

<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">  
//编码

<meta
id="viewport" name="viewport" content="width=320;
initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

<meta
name=”apple-mobile-web-app-capable” content=”yes” />  //
离线应用的另一个技巧    

<meta
name=”apple-mobile-web-app-status-bar-style” content=black” />  //
隐藏状态栏       

<meta
content="black" name="apple-mobile-web-app-status-bar-style" />
//指定的iphone中safari顶端的状态条的样式       


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


<meta
name="Author" contect="Mr.He"/
> 

在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。


2. link:

?

<link
rel=”apple-touch-startup-image” href=”startup.png” /> //
设置开始页面图片

<link
rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> //
在设置书签的时候可以显示好看的图标

<link
rel="stylesheet" media="all
and (orientation:portrait)" href="portrait.css">   
//
肖像模式样式      

<link
rel="stylesheet" media="all
and (orientation:landscape)" href="landscape.css"   //
风景模式样式

 

//竖屏时使用的样式


<style
media="all
and (orientation:portrait)" 

返回

【上篇】C语言学习笔记(14)
【下篇】服装企业的信息管理及主要对象(转)

作者: archlord

• 该日志由 archlord 于12年前发表在综合分类下，最后更新于 2012年09月23日.
• 转载请注明: 手机中的javascript事件 | 学步园 +复制链接

抱歉!评论已关闭.

书签

• 招生
• 白云飘飘网
• 青岛房产网

最新文章New

• 网站优化可以收获更好的收益 robots在网页开发中起到了一定的 SEO引擎优化可以更好的方便搜索 Dreamweaver教程很实用，值得学习 很多的photoshop教程值得学习，你 编程语言很重要，特别是对于计算 数据库非常常见，也非常实用！ H5指的是第5代html，不同于传统企 HTML是什么，该怎么制作？

本站推荐

• 为什么PHP的吉祥物是一头大象

• 作业的提交和监控（二）

• 作业的提交和监控（一）

• Boost – Function 分析

• 奇技淫巧 – C/C++ 宏自身

• 模板的 SFINAE 原则

• Octopress 和 Git 的结合

• Electric-fence 介绍

• web前端
• 数据库
• 编程语言
• 搜索技术
• 关于本站

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 （其他合作也可洽谈）

必威体育

必威电竞