zoukankan      html  css  js  c++  java
  • web移动开发基础(1)

    最近看了下关于手机网页的书,现在做一下总结吧,方便以后自己看

        先了解一下几个基本概念

     1: 视口:移动设备的浏览器视口分为 可见视口   布局视口我们说视口一般指布局视口。

            浏览器设置布局视口 

    1 <meta name="viewport" content="width=320px"/>

       此时页面的最大css宽度为320px.
       viewport的其他可选属性

        width      页面的最大宽度
        height     页面的最大高度
        initial-scale  初始缩放比例(1-10)
        minimum-scale   最小缩放比(1-10)
        maximum-scale   最大缩放比(1-10)
        user-scalable    设置为是否可缩放默认为yes

      一般建议的原标签写法

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

      

    2:媒体查询

        先来一个小实例

        css调用媒体查询,针对iphone4写的一个实例

    @media all and(max-320px) and (-webkit-min-device-pixel-ratio:2){
         //写针对iphone4的样式
     }

       按需求导入css

    <link rel="stylesheet" href="" media="screen and (min-1024px)"/>

      通过js调用媒体查询.实现监听手机的横屏竖屏
     

    function handleOrientationChange(mql){
        if(mql.matches){
          如果是竖屏
       }else{
          如果是横屏
       }
     }
     
     //当前屏幕是否为竖屏
     var mql=window.matchMedia("(orientation:portrait)")   //创建一个MediaQueryList,可以访问它的属性返回ture or false
      mql.addListener(handleOrientationChange)
      //先调用一次,以便知道代码执行时设备所处的状态
      handleOrientationChange(mql)
      
      //移除监听者
      mql.removeListener(handleOrientationChange);


    在手机中hover事件会显得无效,在手机中屏蔽掉hover事件可以提高性能

    简单的解决方法

    1 document.documentElement.className+=('ontouchstart' in window)? 'touch':'no-touch';
    1  document.no-touch .item:hover{
    2   }

      

  • 相关阅读:
    Kubernetes 集成研发笔记
    Rust 1.44.0 发布
    Rust 1.43.0 发布
    PAT 甲级 1108 Finding Average (20分)
    PAT 甲级 1107 Social Clusters (30分)(并查集)
    PAT 甲级 1106 Lowest Price in Supply Chain (25分) (bfs)
    PAT 甲级 1105 Spiral Matrix (25分)(螺旋矩阵,简单模拟)
    PAT 甲级 1104 Sum of Number Segments (20分)(有坑,int *int 可能会溢出)
    java 多线程 26 : 线程池
    OpenCV_Python —— (4)形态学操作
  • 原文地址:https://www.cnblogs.com/sliuie/p/5160228.html
Copyright © 2011-2022 走看看