选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

手机WEB前端开发技巧

随着智能手机的普及,越来越多的优秀手机网站“浮出水面”,作为网页设计师,网页前端工程师必须了解其中的各种技术,这样我们才能跟上潮流永远走在时代前沿;这里我介绍了国外珍贵PPT里的很多关于手机前端工程师必须了解的技术和技巧,希望对大家有用。

一、Viewport Meta Tag(将普通网页“变成”手机版)

实现代码:<meta name=”viewport” content=”width=device-width”/>1

二、链接到发短信和链接到打电话

链接到发短信 href=”sms:18005555555″
链接到打电话 href=”tel:18005555555″2

 

 

三、Home Screen Icon(生成手机网页版桌面图标)

实现代码:<link rel=”apple-touch-icon” href=”icon.png”/>3

四、Full Screen Flag (iOS)(苹果IOS下的页面全屏浏览)

实现代码:<meta name=”apple-mobile-web-app-capable” content=”yes”/>4

五、Splash Screen (iOS)苹果IOS启动画面

实现代码:<link rel=”apple-touch-startup-image” href=”startup.png”/>5

六、Status Bar Style 苹果IOS Status Bar的样式

实现代码:<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>6

七、输入表单搜索

实现代码:<input type=”search”>7

八、输入表单打电话

实现代码:<input type=”tel”>8

九、输入表单发邮件

实现代码:<input type=”email”>9

十、网页媒体Media Capture

直接打开摄像头或麦克风并开始使用
实现代码:
拍照:<input type=”file” accept=”image/*;capture=camera”/>
录像:<input type=”file” accept=”video/*;capture=camcorder”/>
音频:<input type=”file” accept=”audio/*;capture=microphone”/>10_0

十一、自动更正文字 The Joys of Autocorrect

<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”/>10

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。