迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

移动端基本环境

发布时间: 2016-11-18 作者: 嫣然 浏览次数:

以前做过移动端项目,但是一直是用百分比写的,对于移动端没有系统的知识体系,很多时候写项目的时候并没有想为什么要这样写,就是跟着别人的稳当些,最近研究了下移动端网页制作,今天介绍下基本环境的问题。

一:测试环境

chrome浏览器的模拟器,360浏览器的模拟器,在本地安装服务器(xampp)通过手机和电脑连接到一个网络,在真机上进行测试。

二:viewport视口

viewport:可视区窗口

常规设置:

width 设置viewport的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
devicePixelRatio 像素比

三:常用meta设置

(1)qq  强制横屏或者竖屏显示

<meta name="x5-orientation " content="portrait|landscape" />

(2)qq 设置全屏

<meta name="x5-fullscreen" content="true" />

(3)UC强制竖屏或者横屏显示

<meta name="screen-orientation" content="portrait|landscape" />

(4)UC全屏显示

<meta name="full-screen" content="yes" />

(5)禁止识别电话号码和邮箱号码

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

(6)拨打电话或者发邮件

href="tel"
href="mailto

这里总结的是常用的,可能不太全面,以后碰到其他的还会总结出来,下一次我会总结一下移动端rem适配,欢迎网友赐教,鄙人在此感激不尽。
 

赞助
迹忆博客

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: