zoukankan      html  css  js  c++  java
  • iphone在iframe页面的宽度不受父页面影响,避免撑开页面

    工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会。

     <div style=" 100%; height: 300px; overflow-x: hidden; overflow: scroll; -webkit-overflow-scrolling: touch;">
          <iframe src="contract.html" name="contract" width="100%" height="300" scrolling="no" frameborder="0"></iframe>
    </div>

    通过在iframe添加一滑动层,overflow-x: hidden; 会直接将iframe超出的部分隐藏掉,可以知道超出不是iframe的宽度。具体超出的宽度是怎么来的,在网上没找到原因。(希望大侠们指点,谢谢)

    所以只能只能对iphone和ipad端做个兼容,修改iframe页面body页面宽度。将其设置为页面实际宽度相对与屏幕宽度比(设备的宽度)。

    //适配iphone上iframe宽度不是chengk页面的宽度不受父页面
    window.onload = function(){
         alert("网页可见区域宽:"+document.body.clientWidth+"
     屏幕可用工作区宽度:"+ window.screen.availWidth+"
    ");
    
         if (!navigator.userAgent.match(/iPad|iPhone/i))
              return false;
         //如果是iphone,ipad,则重新修改body宽度值
         document.body.style.width = (window.screen.availWidth/document.body.clientWidth)*100+'%';
    }

      

  • 相关阅读:
    python3调用js的库之execjs
    字体替换 re.sub
    asyncio和aiohttp
    微信公众号数据抓取
    celery
    Airtest 的连接安卓模拟器
    Scrapy同时启动多个爬虫
    随机IP代理插件Scrapy-Proxies
    Charles和mitmproxy代理设置
    win下删除EFI分区
  • 原文地址:https://www.cnblogs.com/qiuer/p/6420130.html
Copyright © 2011-2022 走看看