渴切网经常碰到这样的客户，网页切图不仅要兼容pc浏览器，还要兼容ipad，iphone等移动端浏览器，使其能够正常访问，这也说明现在网页切图对前端技术的要求也越来越高了，这是好事，可以带来更高一级的用户体验，看看渴切网是怎么解决的吧。下面是经验分享
iPad旋转变换css样式
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css：
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
侦测设备旋转方向
iPhone可以在横屏状态下浏览网页，蓝狮注册有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：
window.onload = function initialLoad() {updateOrientation();}
function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;
case -90:
contentType += “right”;
break;
case 90:
contentType += “left”;
break;
case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}
这种方法，就是检测屏幕的旋转角度，角度为0，90，180，如果是0，则执行一个css，旋转到90度的时候在更换另外一种css，180度以此类推。
iPhone/iPad才识别的CSS
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。
@media screen and(max-device-width: 480px) {}
缩小图片
网站的大图通常宽度都超过480像素，蓝狮注册开户如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
CSS3媒体查询
对于CSS3的媒体（media）查询，iPhone和iPad是不同的。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。
iPad 是四方型的，应该是可以划分横向和竖向的，那就像怎样让ipad自己能够在从横向变到竖向时，css发生变化呢。经过多方查证media=”all and (orientation:portrait)”可以判断出屏幕处于竖向，media=”all and (orientation:landscape)”可以判断出屏幕处于横向，知道了这两种就可以更换css了，在head里写入下列两行就能实现css切 换了。
iPad直接使用了媒体查询中的orientation属性 :
在打开页面后，两个手指同时相向或相离时，页面和变大或缩小，这样用户体验就不好了，在head里加上
对于CSS3的媒体（media）查询，iPhone和iPad是不同的。
iPhone是通过屏幕最大宽度来侦测的：
渴切网提供专业网页切图服务，并且率先保障兼容ipad等移动端哦。
标签：css, ipad
0 Comments