文档章节

html移动Web开发----优化浏览器视口宽度设置

g
 gethub_sl
发布于 2016/06/13 20:30
字数 215
阅读 33
收藏 1

 在移动设备上,要使移动设备无论竖屏还是横屏,都能使页面内容的宽度和设备的屏幕宽度相匹配,使文字易读性大大提高,我们可以按一下方法操作:

在<head>标签内添加<meta name="viewport" content="width=device-width">  由此使视口的宽度设置为匹配设备的宽度。

对于这个问题,一些较老版本的移动设备浏览器不能识别“viewport”,可以采用下面的方法:

在<head>标签内添加<meta name="HandheldFriendly" content="true">

对于微软的PocketPC,需要使用一个特别的“MoblieOptimized”属性:

<meta name="MoblieOptimized" content="320">

因此对于该问题最完整的解决方案的代码如下:

<meta name="viewport" content="width=device-width">

<meta name="MoblieOptimized" content="true">

<meta name="HandheldFriendly" content="320">

© 著作权归作者所有

共有 人打赏支持
g
粉丝 0
博文 22
码字总数 4460
作品 0
杭州
程序员
私信 提问
第118天:移动端开发——视口

移动端视口的分类说明。在开始之前,先看一个典型的例子: 1 2 @media screen and (max-width:480px){3 //宽度不超过480px时的样式 4 } 上述代码相信大家在做移动端开发时经常去书写。它研究...

半指温柔乐
2017/12/18
0
0
关于移动端的适配

写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢 基础介绍 在说明移动端的适配之前我们需要理解一个重要的东西 像素!! 像素 在移动端给一个元素设置时发生了什么?这里的px到底是多...

熊蛋子17
2017/12/31
0
0
PC端的viewport

视口 视口(viewport)的作用是限制元素,元素是所有网页块元素中最高一级的元素。 一个实际的例子。假设在一个流式布局中,你其中一个边栏的宽度是10%。现在当你改变浏览器宽度时,边栏会一...

金于虎
2016/10/27
5
0
PC前端转移动前端的二三事——移动端适配

一、首先要搞明白移动端适配问题,就要先搞明白像素和视口 像素包含2种像素:物理像素和css像素 物理像素又称设备像素,任何设备的物理像素的数量是固定不变的,单位是pt。所谓的一倍屏、二倍...

Wendy曹
2018/07/01
0
0
墙裂科普:移动端适配的基础概念

近几年移动端设备数量增长迅速,导致各种设备屏幕尺寸不一,分辨率也是不尽相同。 作为一个前端开发者,就不得不面对移动端页面适配的问题,而适配的终极目标,就是让页面能在不同尺寸,不同...

沃趣葫芦娃
2018/07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

词法分析器flex教程

词法分析器flex教程 flex是基于正则表达式,用于对字符串进行提取和分析的工具。一般情况下,flex常用语编译器前端的词法分析阶段。flex程序读取用户输入的词法单元描述文件,生成lex.yy.c文...

陶小陶
6分钟前
0
0
IDEA 社区版没有 Spring Initializr

RT 解决办法 打开文件 - 设置 - 插件 输入 Spring 找到插件 Spring Assistant 并安装 下载可能会需要一点点时间 . 重启 IDEA 后,新建项目就可以看见 Spring Assistant 选项了...

taadis
9分钟前
0
0
MySQL执行计划 type类型

MySql提供了EXPLAIN语法用来进行查询分析,在SQL语句前加一个"EXPLAIN"即可。 explain select * from t_settlement_settle_order_detail where id = 2; 下面来介绍各个字段: type:连接类型......

ChyiHuang
12分钟前
0
0
mysql遇到的坑

sql_mode=NO_ENGINE_SUBSTITUTION 今天在测试库上发现使用GROUP BY 报错,我使用的mysql5.7 ONLY_FULL_GROUP_BY 对于GROUP BY聚合操作,如果在SELECT中的列、HAVING或者ORDER BY子句的列,没...

事儿爹
24分钟前
0
0
聊聊flink的InternalTimeServiceManager

序 本文主要研究一下flink的InternalTimeServiceManager InternalTimeServiceManager flink-streaming-java_2.11-1.7.0-sources.jar!/org/apache/flink/streaming/api/operators/InternalTim......

go4it
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部