web app 开发

最新推荐文章于 2022-10-24 18:24:03 发布

寂寞的六一

最新推荐文章于 2022-10-24 18:24:03 发布

阅读量489

点赞数

分类专栏： wed前端

wed前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1
1

节省样式的加载，其实不仅是为了节省加载，也是为了达到自适应的效果

目前而言，要改变网站的配色方案或者写不同设备的专用样式表，是通过如下代码：

@media only screen and (min-device-width:640px) { ... }//例如，适应某设备的分辨率

其实，没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式。

<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">

这样的好处是，只有当你的使用相应的设备，才能加载到相应的样式表。

现在手机的分辨率都比较高了所以这个方法不知道以后还会不会那么适用，但现在还是通用的。当然你也可以通过判断设备来源加载css，可以用js或php等动态语言都是可以的。
2

meta标签

web app的精华所在，这也是html5中注入的新鲜血液，让我们不用在为开发手机等设备上的页面而去学习新的语言。只要一个html5就可以实现为所有设备制造页面。

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

//强制让文档的宽度与设备的宽度保持1:1，

//文档初始化缩放比例是1:1，

//不允许用户点击屏幕放大浏览，

//允许用户缩放到的最大比例，

//尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;

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

//iPhone私有标签，它表示：允许全屏模式浏览

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

//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式

4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码
3

CSS3 -webkit

移动端表单类有圆角、阴影，点击链接时，有灰色底高亮等

1) 消除被点击元素的外观变化，所谓的点击后高亮： -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

2) 阻止旋转屏幕时自动调整字体大小：-webkit-text-size-adjust:none;

3) 解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;

4) 盒子阴影：-webkit-box-shadow: none;

5) 圆角：-webkit-border-radius: 0;

6) appearance 属性使元素看上去像标准的用户界面元素，也可以取消默认的样式：-webkit-appearance: none;一般情况下这个属性我们只给按钮元素，解决ios中默认样式使得我们自己写的样式不生效的问题。

7)栅格布局：box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

8) 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）：-webkit-touch-action: manipulation;
4

App icon 制作

说明：所谓单机模式，其实就是通过把网站添加到主屏，由主屏进入并访问网站的一种方式。通常，app icon是自动截取网站的一部分截图。这样并不是很美观，但也可以通过代码来解决这个问题。尺寸：在iPhone上的默认大小是57px，在iPad上是72px。icon原始图片建议尺寸为128px或者256，并且不建议自行添加光影效果，因为OS自带了。

<link rel="apple-touch-icon" href="/path/to/custom-icon.png">// 若想去掉系统自带的反光效果，可以增加“-precompsed”属性。

<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png">
5

解决触屏设备点击延时问题

当触发"Click"事件时，移动端浏览器将等待约300毫秒的时间后再做出响应，原因是浏览器要判断用户是否执行双击。

解决方法，导入 fastclick.js 即可减少这个时间差：

<script type='application/javascript' src='/path/to/fastclick.js'></script>

导入文件后执行 FastClick.attach(dom元素);就可以了

jQuery 使用方法：

$(function() {

FastClick.attach(document.body);

});
6

如果觉得自己配置比较麻烦那就复制下面的代码吧

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />



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

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

<meta name="data-spm" content="a215s" />

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

<meta content="fullscreen=yes,preventMove=no" name="ML-Config" />

<link href="icon114-114.png" rel="apple-touch-icon-precomposed">

<link href="icon.png" rel="Shortcut Icon" type="image/x-icon" />

<title>first web app</title>

</head>

<body>

first web app

</body>

</html>

寂寞的六一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web app 开发

11节省样式的加载，其实不仅是为了节省加载，也是为了达到自适应的效果目前而言，要改变网站的配色方案或者写不同设备的专用样式表，是通过如下代码：@media only screen and (min-device-width:640px) { ... }//例如，适应某设备的分辨率其实，没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式
复制链接

扫一扫