自适应开发

最近准备针对手机做开发,遇到页面显示特别小,所以搞了这么一篇文章!

其实主要就是改掉HTML页面声明:

在网页中加入以下代码,就可以正常显示了:

代码如下:

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

  

解释:

width - viewport的宽度 
height - viewport的高度 
initial-scale - 初始的缩放比例 
minimum-scale - 允许用户缩放到的最小比例 
maximum-scale - 允许用户缩放到的最大比例 
user-scalable - 用户是否可以手动缩放

精简点的话,可以把上面的代码更改为以下代码,效果是一样的:

代码如下:

<meta content="width=device-width,user-scalable=no" name="viewport">

 

最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90%,这是屏幕自适应的。

时间: 2024-11-05 15:49:25

自适应开发的相关文章

Viewport Resizer下载 谷歌前端自适应开发工具

原文链接:http://www.phpbiji.cn/article/index/id/107/cid/6.html Viewport Resizer下载 谷歌前端自适应开发工具 在前端开发过程中,随着移动端手持设备的普及,避免不了要适应各种大小的屏幕,所以测试工作在开发中尤为重要: 设定各个分辨率的浏览器在目前各大浏览器中都有展现,但是用起来都比较不方便,所以我们推荐一款谷歌的自适应插件 Viewport Resizer 下载地址: http://pan.baidu.com/s/1eSunB9

iOS8 tableView的Cell高度自适应开发

1.在- (void)viewDidLoad中设置: //预计高度为81 self.tableView.estimatedRowHeight = 81.0f; //自适应高度 self.tableView.rowHeight = UITableViewAutomaticDimension; 2.XIB自定义的Cell的autoLayout的时候注意自适应的内容的Label或者TextField等等的约束. 3.当然不需要实现设置高度的方法了. - (CGFloat)tableView:(UITa

软考考前冲刺第七章软件工程基础知识

瀑布模型:严格遵循软件生命周期各阶段的固定顺序,一个阶段完成再进入另一个阶段.其优点是:可以使过程比较规范化,有利于评审;缺点在与:过于理想,缺乏灵活性,容易产生需求偏移.所以瀑布模型的应用场合为:需求明确的项目.二次开发项目以及与原型法配合使用. 快速原型模型:采用了一种动态定义需求的方法,通过快速的建立一个能够反映用户主要需求的软件原型,让用户在计算机上使用它,了解其概要,再根据反馈的结果进行修改,因此能够充分体现用户的参与与决策.原型化人员对原型的实施很重要,衡量他们的重要标准是能否从用户

2014年,拼命的一年

2014年,我的身份变了,不再是可以找各种借口的学生了,这一年,是有历史意义的一年. 翻了翻去年的一年总结,看了看这一年自己都学了些什么! SSH 首先应该从SSH开始说起,SSH部分,主要学习了Struts.Spring.Hibernate三个框架.从目前来看,SSH三大框架是JAVA的基础,有了这三个框架基本上你就可以做一些普通的开发工作了.大多数公司的java开发也是以这三个框架为主的.但是,自己现在学的只是如何使用,没有对源码进行深入的研究,这是这部分自己尚欠缺的地方,在工作之前,要拿出

常见BUG-Web

转自:https://blog.csdn.net/xinxin920606/article/details/86592490 1.对内容超长以省略号代替的,鼠标hover后忘记添加完整内容tips测试:输入超长内容,查看tips完整提示2.页面实际展示的字体大小和文案位置等往往与产品要求的不一致.测试:按照设计稿要求查看实际实现的是否符合设计要求3.数据计算或显示错误,如小数位数保留不对.没有考虑分母为0的情况或未对数据进行千分位分割.测试:按照文档要求进行测试,检查全站是否统一格式4.对于操作

微信公众平台开发 - 页面自适应

通过以下标签实现页面自适应: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [ye

安卓开发入门指南--安卓手机自适应draw9patch不失真背景设置具体步骤

一.[安卓手机自适应draw9patch不失真背景]实际问题 前一段时间,去长江玩了一趟,拍了很多照片,不过都是手机拍的,正常尺寸都是看不清楚老婆的脸蛋,就不自在的开始放大放小,可是一定程度图片就失真了.不知道你们都遇见过这样的情况吗?其实作为一个程序开发者,我很清楚这个手机自适应draw9patch不失真背景不怎么好,今天不妨就实际问题给大家解决一下. 首先背景自适应且不失真问题的存在已经给大家聚过例子了,希望大家多在生活中观察,遇到任何安卓app问题,可加QQ群:175229978进行交流.

微信开发根据设备高度进行栏目的自适应填充

微信开发的时候,如果页面顶部有轮播图,底部有导航栏,中间是栏目,那么让中间的栏目,如何根据设备的高度,来进行自适应的填充呢? 首先想到的是运用媒体查询,但是媒体查询效果差,效率低,所以就运用jQuery写法来进行实现. 效果图: 首先知道顶部的轮播图的固定高度是200px,底部的导航栏固定高度是50px,我们只需要获取整个设备的高度,然后减去 200px+50px 就可以得到中间可供栏目显示的高度. 然后我们需要知道栏目的 li 自身高度,这里是35px,那么代码实现如下: $(document

.Net语言 APP开发平台——Smobiler学习日志:开发APP时,如何快速地实现屏幕自适应

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.属性介绍 设置控件在客户端屏幕可见并超出客户端屏幕时,是否自动调节高度以适应屏幕高度 二.举例介绍 当AutoHeight属性为"True"时,Mobile Form的Scrollable属性将失去效果,以GridView控件的下面两种情况为例(以下两种情况的Mobile Form的Scrollable属性都为"True"): 情况一: Smobil