资讯专栏INFORMATION COLUMN

关于touch和web端的CSS说明

alanoddsoff / 1426人阅读

摘要:内容不会被修剪,会呈现在元素框之外。内容会被修剪,并且其余内容是不可见的。内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。规定应该从父元素继承属性的值。

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

Meta标签

width - 可视区域的宽度,为一个正整数,或字符串"device-width"

height - 可视区域的高度,为一个正整数,或字符串"device-height"

initial-scale - 初始的缩放比例,取值1.0则页面按实际尺寸显示,无任何缩放

minimum-scale - 允许用户缩放到的最小比例,为一个数字,可以带小数

maximum-scale - 允许用户缩放到的最大比例,为一个数字,可以带小数

user-scalable - 用户是否可以手动缩放,值为"no"或"yes", no 代表不允许,yes代表允许



telephone - 数字是否转化为拨号链接,值为"no"或"yes", no 代表不允许,yes代表允许,当设置为no,打电话

email - 是否自动识别邮箱,值为"no"或"yes", no 代表不允许,yes代表允许,当设置为no,当设置为no,
发送邮件

获取滚动条的值
window.scrollY  window.scrollX

桌面浏览器中想要获取滚动条的值是通过document.scrollTopdocument.scrollLeft得到的,android和IOS通过window.scrollY window.scrollX

禁止复制粘贴文本
-webkit-user-select:none
移动端touch事件

touchstart //当手指接触屏幕时触发

touchmove //当已经接触屏幕的手指开始移动后触发

touchend //当手指离开屏幕时触发

touchcancel//当某种touch事件非正常结束时触发

这4个事件的触发顺序为:
touchstart -> touchmove -> touchend ->touchcancel

overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

background-image和image的加载区别

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49997.html

相关文章

  • 关于touchweb端的CSS说明

    摘要:内容不会被修剪,会呈现在元素框之外。内容会被修剪,并且其余内容是不可见的。内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。规定应该从父元素继承属性的值。 什么是Viewport 手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以...

    Bamboy 评论0 收藏0
  • HTML中head头结构

    摘要:移动互联网时代,头部结构,移动端的元素,显得更为重要。最后语言是语言的语言标识符,如表示英文,表示中文。分别表示严格版本,过渡版本,以及基于框架的文档。在中有两个主要目的。对文档进行有效性验证。 HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head ...

    canger 评论0 收藏0
  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要:不允许再有其他文件,不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试,并回复本邮件。项目地址最终版的计算器,项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题,题目如下: 用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器 showImg(https://segmentfault....

    PiscesYE 评论0 收藏0
  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要:不允许再有其他文件,不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试,并回复本邮件。项目地址最终版的计算器,项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题,题目如下: 用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器 showImg(https://segmentfault....

    youkede 评论0 收藏0
  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要:不允许再有其他文件,不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试,并回复本邮件。项目地址最终版的计算器,项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题,题目如下: 用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器 showImg(https://segmentfault....

    fancyLuo 评论0 收藏0

发表评论

0条评论

alanoddsoff

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<