WebKit不再支持target-densitydpi，有什么替代方法_百度知道
WebKit不再支持target-densitydpi，有什么替代方法
提问者采纳
　对于网页来说;meta name=&quot，使用CSS3 媒体查询将页面视窗区域设置为设备的物理尺寸。
　　如果你觉得target-densitydpi是必须的。如: device-width， 　　可以避免不同分辨率带来的问题; 　　}
　　& content=&quot，与target-densitydpi的作用差不多;
　　有了这个;viewport&quot， 　　CSS3媒体查询有一个resolution属性;&gt： 　　@viewport { 　　width，基本上就不需要target-densitydpi了;width=device-width&quot。 　　可以通过@viewport规则或者meta HTML标签来做到这一点
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
webkit的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁1997人阅读
1、要保证页面在手机中正常显示，需要在&head&标签内添加如下语句：
&meta name=&viewport& content=&width=480, target-densitydpi=high-dpi, user-scalable=no& /&
2、一些css中需要注意的设置：&
html{height:100%;}&
body{min-height:100%;position:}&
3、表单元素在手机中点击时会出现边框，取消边框的写法如下：
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
4、背景图片background中，0 0 位置值是默认值，可以省略不写；repeat双方向重复也是默认值，也可以不写；位置值中的“bottom”、“right”可以使用“100%”来替代，以此减少代码量。如下：&
div{background:url(pic.png) 0 0}简写为div{background:url(pic.png);}&
5、box-sizing:border-box时，表示width值包含了border和padding的值。默认是不包含的。&
6、border-radius设置圆角，可依次设置四个方向的圆角大小，顺序从左上角按顺时针旋转。如：&
.class{border-radius:0 0 5px 5px}设置的是一个上边直角，下边5像素圆角的元素。&
7、在手机中的颜色渐变写法：（只考虑webkit）
background-image:-webkit-gradient(linear,0 0,0 100%,from(#f3b787),to(#e39e61));&
background-image:-webkit-linear-gradient(top,#f3b787,#e39e61);&
8、内外阴影同时存在的写法：
-webkit-box-shadow:1px 1px 1px #FFF inset，1px 1px 2px #ded5
注意：内外阴影同属于同一个css属性（box-shadow），因此要写在同一句box-shadow里面，值用逗号分隔。内阴影是inset，外阴影为默认，不需要写outset，写了outset反而不起作用了。&
9、双层边框的写法，可以使用内阴影来实现。有些按钮除了有外边框线之外，还会在边框线内有一条1px大小的较亮的边框线来提升按钮视觉感受。此时要实现这条亮框线，就可以使用内阴影来实现，具体写法如下：
-webkit-box-shadow:1px 1px 1px #FFF inset, -1px -1px 1px #FFF
值分别表示：水平方向位移、竖直方向位移、阴影大小、阴影颜色、内阴影。&
要实现四个方向的内阴影，就要写两个值，一个是实现右下，一个实现左上。&
10、按钮被按下的瞬间的状态效果，使用 .btn:active{…}的写法。但目前在手机上不支持该效果。解决方案尚未找到。。。&
11、对话气泡的写法：一个气泡写成一个单独的HTML文件，气泡的上下边框和背景都需要图片样式来实现的时候，可以考虑对&html&写样式，将其中一部分图片样式写到&html&中，另一些样式写在&body&中，最后一些样式写在&div&中，这样可以减少div的嵌套层数。&
12、手机页面中的文字大小使用pt作为单位：.class{font-size:18}具体大小需要用手机测试来确定最终效果。
13、为了减少http响应，要尽量使用CSS Sprites。但不是所有图片都可以拼合进去。
元素宽度自适应
&&& 之前做pc端的时候写过一篇宽度自适应的文章，不足的是不灵活，如果一行元素由3个变成2个，为了改变样式就需要一定的判断了。现在有了display:box，一切就变得简单了。
parent {display :}&
children {box-flex : 1;}
&&& *需要自适应的子元素必须是display:block or box，否则无效&
&&& *若需子元素间保持宽度一致，需设置width:100%
&&& 单行文本溢出显示…
element{text-overflow :white-space :overflow :}
&&& 多行文本溢出显示…
element{-webkit-line-clamp : 2;box-orient :}
&&& *元素必须是display:box，否则无效
&&& 文字水平垂直居中
element{box-pack :box-align :}
&&& *元素必须是display:box，否则无效
&&& 图片水平垂直居中
&&&& 一开始我认为通过设置display:table-cell，加上vertical-align:middle就可以解决垂直居中的问题，但是后来发现改变了display后会影响到本身的布局了，所以推荐下面这种方式。
&&& img vertical-align :&
&&& parent : after{&
&&&&&&& content : & &;&&&&&&&&
&&&&&&& visibility :&
&&&&&&& display : inline-&
&&&&&&& height : 100%;&
&&&&&&& vertical-align :&
&&& 手机上的点击反馈
&&& 去掉浏览器默认的反馈，-webkit-tap-highlight-color : rgba(0,0,0,0);&
&&& *不需要点击反馈，不用a标签(UC下问题)；&
&&& *使用了delegate，建议使用a或者button；&&
&&& *ipad下必须设置在绑定事件的元素上。
&&& transform闪动问题
parent {-webkit-backface-visibility :}&
children {-webkit-transform-style : preserve-3d;}
&&& *下会出现一些问题（click失效、input重影等）；&
&&& *可使用-webkit-transform : translate3d(0,0,0)替代。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：84399次
积分：1165
积分：1165
排名：千里之外
原创：22篇
转载：10篇
评论：96条
(1)(2)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(1)(2)(2)(1)(1)(1)(4)(1)(1)(1)(3)(1)jQuery 1.9使用$.support替代$.browser的使用方法
字体：[ ] 类型：转载 时间：
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我们来看下具体的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合使用 jQuery 1.9 和 2.0， 官方的解决方案是：
代码如下:&!--[if lt IE 9]&&&& &script src='jquery-1.9.0.js'&&/script&&![endif]--&&!--[if gte IE 9]&&&& &script src='jquery-2.0.0.js'&&/script&&![endif]--&
从长久来看，这样有利于在复杂情况下根据浏览器特性进行分别处理， 而不是简单的检测浏览器类型和版本。 但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性， 所以在网上找了一些能够直接替换的解决办法。
判断浏览器类型：
代码如下:$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
等号后面的表达式返回的就是 true/false， 可以直接用来替换原来的 $.browser.msie 等。如需要检查是否为 IE6时，可以这么写：
代码如下:// Oldif ($.browser.msie && 7 & $.browser.version) {}// Newif ('undefined' == typeof(document.body.style.maxHeight)) {}
检查是否为 IE 6-8：
代码如下:if (!$.support.leadingWhitespace) {}
终极方法是用另外的类库替代，可以参照老外写的一篇文章：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具WebKit不再支持target-densitydpi，有什么替代方法_百度知道
WebKit不再支持target-densitydpi，有什么替代方法
　　&lt。如，使用CSS3 媒体查询将页面视窗区域设置为设备的物理尺寸;
　　有了这个， 　　可以避免不同分辨率带来的问题： 　　@viewport { 　　width。 　　可以通过@viewport规则或者meta HTML标签来做到这一点， 　　CSS3媒体查询有一个resolution属性;width=device-width&quot。
　　如果你觉得target-densitydpi是必须的: device-meta name=&viewport&quot　　对于网页来说;&gt，基本上就不需要target-densitydpi了，与target-densitydpi的作用差不多; content=&quot
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
webkit的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁WebKit不再支持target-densitydpi，有什么替代方法_百度知道
WebKit不再支持target-densitydpi，有什么替代方法
提问者采纳
viewport&meta name=&有了这个对于网页来说。可以通过@viewport规则或者meta HTML标签来做到这一点;& content=&quot：@viewport {width。如;}&lt，CSS3媒体查询有一个resolution属性: device-width，使用CSS3 媒体查询将页面视窗区域设置为设备的物理尺寸，可以避免不同分辨率带来的问题。如果你觉得target-densitydpi是必须的;width=device-width&quot，基本上就不需要target-densitydpi了，与target-densitydpi的作用差不多
来自团队：
其他类似问题
为您推荐：
webkit的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁