码迷,mamicode.com
首页 > 移动开发 > 详细

移动端适配 /移动开发与桌面开发

时间:2019-12-14 19:31:05      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:别人   view   应用   基础   代码   移动网页   多重   pre   缺点   

移动开发与桌面开发


 

手机网页开发(移动网页)

  • 使用的技术是一样的
  • 区别仅在屏幕尺寸和交互方式

 

1.设置viewport

mate标签(元数据)是数据的数据信息

  <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
//写在head标签内

viewport是html的父元素

下面语句设置它的尺寸

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0
user-scalable=no">

//width=device-width 宽度等于设备宽度
//height=device-height 高度等于设备高度
//initial-scale 初始缩放比例
//maximum-scale 允许用户缩放最大比例
//minimum-scale 允许用户缩放最小比例
//user-scalable  是否允许用户缩放

2.调试页面

chrom开发者工具调试手机页面 //浏览器兼容问题  最终还是要手机看一下

标签和css有一些兼容性问题   网站caniuse  网站查阅

3.媒体查询/响应式设计

定义:根据分辨率不同选择不同的样式

主要作用:

  • 监测媒体类型,比如 screen,tv等
  • 监测布局视口的特性,比如视口的宽高分辨率等

用法

//用在style标签内部

@media all // 所有媒体类型,tv,手机,打印机 
and  //逻辑操作
(min-width: 200px) and (max-width: 300px) {
body {}
}    

缺点:很多重复的css 

Hxbrid app(混合开发)

混合开发基础:

写的网页运行在手机程序中。本来网页提供的功能是有限的。

但是应用程序可以给页面添加函数

在这种情况下,js就可以调用别人提供的功能

例子:

比如js不能实现手机震动

ios 安卓 可以让手机震动

ios写一个object C 让手机震动,并且暴露出去

把这个东西注册为网页的一个js函数

js调用这个js函数 手机就震动

js函数调用object C 让手机震动

 

总结:看上去是js让手机震动,只要把api提供给js

js代码就是用别人提供的功能写逻辑

移动端适配 /移动开发与桌面开发

标签:别人   view   应用   基础   代码   移动网页   多重   pre   缺点   

原文地址:https://www.cnblogs.com/-constructor/p/12040356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!