说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。 1. 响应式web设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在...
前几天做了一个挺简单的页面，顶部banner图，然后下面一段说明文字，再往下是表格。 最开始字体统一1.2em，在设计稿640宽的环境下，页面和设计稿基本一致，挺好看的，但是如果在小屏手机中，因为banner图缩小到屏幕一样宽，就等比缩小了，而文字还是原来那么大，字体就会显得特别大。然后我的处理方式是用css媒体查询，判断在屏幕宽度哪个范围 就用多大的字体。 我移动web开发时间不长，请教下大神，这么做，是否有必要，或者有...
css3是移动Web开发的主要技术之一。当前，CSS3技术最适合在移动Web开发中使用的特性有增强的选择器、阴影、强大的背景设置 、圆角边框 接下来我们主要讲解增强型的选择器，主要分两种，属性选择器和伪类选择器 1、属性选择器 1.1完全匹配选择器 语法：[attribute=value] 属性匹配选择器[id=article]{ color:red;} 1.2包含匹配选择器 语法：[attribute*=value] 属性匹配选择器属性匹配选择器属性匹配选择器[id*=arti...
首先做开发码子编完了我们得有个工具去看效果，PC端开发我们有firefox,chrome等等，那么我们做手机web用什么做调试？手机设备多种多样，不同品牌，不同的屏幕尺寸。当然我们不可能把所有的手机设备都买齐了，然后在开发的时候，在桌子上从左到右依次摆放，在写了一段代码之后，从左到右依次刷新，呵呵。如果真有人这么去做，我也不说啥了，我只求跪求土豪咱做朋友吧~嘿嘿。 废话说了一推，说回重点：首先，移动web开发咱需要一个...
原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。如下图： 如果移动端web也想做类似的功能，可以实现吗？ 你可能会说着：“不就是放一个position: fixed;的输入框在页面底部嘛，有什么好难的？!” 当时我也是这么想的(⊙﹏⊙)，但事实真的是这样吗？下面我们来看一些测试结果。 安卓4.2.1－qq浏览器，测试结果如下： 如图所示，...
让网页的宽度自适应屏幕 1）html上加入 发确保网页的效果 2） 加上以下语句可使网页在苹果设备上运行更好 3）加入这句话可以定义iphone的添加到主屏幕的图标 网页打开方式：链接target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)表示页面中的所有链接都在新窗口打开 madinc.co// autocomplete="off"//去掉输入框的历...
× 目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话 实际上，并没有人提过屏幕三要素这个词，仅是我关于移动web开发屏幕相关部分总结归纳的术语。屏幕三要素包括屏幕尺寸、屏幕分辨率和屏幕像素密度。 屏幕尺寸 我们常常听说5.5英寸大屏幕手机，实际上屏幕尺寸是指屏幕的对角线长度。常见的屏幕尺寸有3.5、4、4.3、4.8、5.0、5.2、5.5、6.0等 对于英寸没有什么概念，可以通...
× 目录 [1]定义 [2]分类 [3]3P [4]缩放 [5]DPR [6]API 前面的话 像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就说不清楚了。本文将介绍关于像素的相关知识 定义 像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加...
× 目录 [1]特性 [2]安装 [3]设置 [4]移动端 前面的话 chrome的开发者工具可以很好地做好模拟工作，但毕竟模拟和实际还是有差别的。所以，真机测试是一定要做的，如何高效地进行真机测试呢。个人感觉，还是BrowserSync用得比较称手。本文将详细介绍如何应用BrowserSync进行移动端真机测试 特性 BrowserSync能让PC、各移动设备上的页面同时实时地响应文件的更改，而不用刷新操作...
× 目录 [1]布局视口 [2]视觉视口 [3]理想视口 [4]meta标签 [5]总结 前面的话 在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport) 布局视口 ...
字体设置 使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;} iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。 Heiti SC Light 黑体-简 细...
今天在尝试做移动页面的时候遇到了一个问题，meta content="telephone=no,email=no" name="format-detection">,不知道这句话具体含义是什么就查了下, 并且查到其他的一些标签的相关内容,记录在这里，方便以后常常查看。以下是关于format-detection的解释,如有错误请大家指出。 format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：...
让网页的宽度自适应屏幕 1）html上加入 发确保网页的效果 2） 加上以下语句可使网页在苹果设备上运行更好 3）加入这句话可以定义iphone的添加到主屏幕的图标 网页打开方式：链接target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)表示页面中的所有链接都在新窗口打开 madinc.co// autocomplete="off"//去掉输入框的历史记录 querySel...
目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话实际上，并没有人提过屏幕三要素这个词，仅是我关于移动web开发屏幕相关部分总结归纳的术语。屏幕三要素包括屏幕尺寸、屏幕分辨率和屏幕像素密度。屏幕尺寸我们常常听说5.5英寸大屏幕手机，实际上屏幕尺寸是指屏幕的对角线长度。常见的屏幕尺寸有3.5、4、4.3、4.8、5.0、5.2、5.5、6.0等对于英寸没有什么概念，可以通过转换公式转换成常用的厘米1英寸 = 2.54厘米3.5in = 3.5*2.54c...
目录 [1]定义 [2]分类 [3]缩放[4]DPR[5]API 前面的话像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就说不清楚了。本文将介绍关于像素的相关知识定义像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，...