Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?

最开始我只想用css 做一个简单的iPhone 样式,后来想法不断涌出,项目还使用了非工程化Vue.js、Webcam.js、Mapbox API

如果使用工程化Vue开发移动端效果会比现在好。

Safari 做的不是很好,之前想法是真正模拟浏览器 用iframe 但是一般网站都禁止非同源的调用。
而且在这个模拟的手机中显示其他的网页有点小,排版也不太好,最后干脆就新标签打开了。
模拟iPhone 实现了拍照、手电筒、Safari、地图、上滑底部横条等功能

Features

目前功能

  • 实时时间日期
  • 手电筒功能
  • 拍照功能
  • 拍照图库预览图功能
  • iPhone底部横条上拖返回功能
  • 桌面
  • Safari
  • 地图

Todolist

  • 更换手机外壳颜色
  • 更换壁纸
  • 相机滤镜等功能实现
  • 图库
  • 音乐

Demo

Codepen

Github
https://github.com/kayw-geek/...

截图

Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?_第1张图片

Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?_第2张图片

Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?_第3张图片

Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?_第4张图片

Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?_第5张图片

你可能感兴趣的:(Web 模拟iPhone ? 网页上也能用iPhone拍照? 地图?Safari?)