首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js和css实现手机横竖预览思路整理

首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的; 一个手机页面在这里预览,要通过标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现; 因为要实现横和竖的预览,切记,千万不能在点击横的时候,把竖的页面旋转90度,这样是没有效果的...,因为预览页面的本身还是竖的,只是页面跟着一起旋转了90度,要单独另外写一个横的box,宽度大于高度的,这样当预览页面识别到宽度大于高度,即按横的效果展示; 我这里实现思路是把横的div默认display...:none;默认选择竖的时候,就直接把竖的box下的iframe的url和横模式下的iframe的url一起改变了,当选择横的时候,展示横的box,隐藏竖的box,但是事实是横的此时不会展示页面...横与竖通过定位放在同一个位置即可。

3.7K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    TRTC横竖切换

    一、简介 本篇主要介绍TRTC通话时,横竖切换接口的调用示例、通话效果。 音视频通话完整链路,大致是:本地采集、本地预览、编码输出、网络传输、接收解码渲染。...用户要的只是4种效果:自己横竖切换+对方看到的横竖切换,但是sdk却有4X4X4=64种实现方式,一旦遇到问题就很费解。以下将引导:用最简单的方式,体验sdk的横竖切换功能。...还有一些手机,平放在桌面时,会发生横竖切换,这是手机重力感应触发的,请把手机支起来吧,或者关闭手机的重力感应。...关于sdk重力感应功能,可以参考这篇《TRTC横竖切换2,重力感应》 3、横后画面裁剪问题 横后画面只显示中间一小部分,看上去放大了。...setRemoteViewFillMode 另外,您也可以同步调整view的横竖比例。 链接 《TRTC横竖切换2,重力感应》

    3.2K135

    iOS横竖切换

    横竖切换实例 竖界面如何present横界面 竖present横是很普遍的场景,比如说视频播放场景的全屏切换,就可以在当前竖的界面present一个横播放界面的方式,实现横竖切换。...工程配置、AppDelegate、UIViewController这三者,在横竖切换过程的关系是什么? 自动旋转和手动旋转有什么区别? .......仅仅知道切换适配代码,是无法形成横竖切换理解,也就很难回答上述的问题。 由于没有找到解释横竖切换机制的官方文档,以下根据自己的经验对这个切换的机制进行分析。...注意事项 其他横竖适配方式 1、视图适配:通过transform修改layer从而在视图上实现横,但是此时屏幕宽度、状态栏、安全距离等都保留竖状态,这种方式仅仅适用于横弹窗等部分场景; 2、新建...Window:由于App的适配是UIWindow为单位,那么理论上是可以新建一个UIWindow来横的界面; 横竖切换通知 NSNotification通知 [[NSNotificationCenter

    2.6K20

    android横竖切换问题

    一、禁止横竖转换 Android横竖切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖切换时引发不必要的麻烦,通常禁止掉横竖的切换, 通过在AndroidManifest.xml中设置activity...比如下列设置 android:screenOrientation="portrait" 则无论手机如何变动,拥有这个属性的activity都将是竖显示。...二、横竖切换 如果要让软件在横竖之间切换,由于横竖的高宽会发生转换,有可能会要求不同的布局。...这里提一个小知识,Android模拟器中,快捷键"Ctrl+F11/F12"可以实现转 五,自适应转换 如果想让它启动的时候是横的话就横表示,纵的话就纵表示,然后手机切换横竖就不能用了该怎么解决呢...怎么让它从别的屏幕回来后,又重新横竖布局呢? 只要在OnResume()中在设定下就行了。但是这个只支持横竖只有一个layout的。横竖分别对应layout的还不知道该怎么解决。 1.

    2.4K20

    apicloud APP横竖切换

    APP开发中会遇到例如视频全屏播放如果不是使用原生模块,则需要通过将屏幕切换为横显示才能实现全屏。或者某些APP用户在使用pad体验时提供横竖切换体验会更好。...这个时候就需要使用到setScreenOrientation来实现横竖切换。...取值范围: portrait_up //竖时,屏幕在home键的上面 portrait_down //竖时,屏幕在home键的下面,部分手机如iPhone...//屏幕根据重力感应在横竖间自动切换 (需要自动切换横竖可以用该值) auto_portrait //屏幕根据重力感应在竖间自动切换 auto_landscape...//屏幕根据重力感应在横间自动切换 例子: api.setScreenOrientation({ orientation: 'landscape_left'}); 例如设置了横竖自动切换同时页面中应用了

    1.3K20

    iOS 知识小集(横竖切换)

    iOS 中横竖切换的功能,在开发iOS app中总能遇到。以前看过几次,感觉简单,但是没有敲过代码实现,最近又碰到了,demo尝试了几种情况,这里就做下总结。 注意 ?...一般情形 所有界面都支持横竖切换 如果App的所有切面都要支持横竖的切换,那只需要勾选【General】 中的【Device Orientation】,选择希望支持的方向即可。 ?...然后使用一个基类控制器,在基类控制器中重写两个控制横竖的方法: // 支持设备自动旋转 - (BOOL)shouldAutorotate { return YES; } // 支持竖显示...另一种方式,是借助通知来控制界面的横竖切换。 还是整个App中大部分界面都是竖,某个界面可以横竖切换的情况。...这里有一个用JS 和原生item 控制横竖切换的Demo。地址 这是效果图: ? 横竖切换.gif 横竖切换总结就到这来了,Have Fun!

    4.2K41

    TRTC横竖切换2,重力感应

    一,简介 如前篇文章《TRTC横竖切换1,手动切换》介绍,TRTCSDK提供了三个api,支持手动调整横竖切换,组合起来有4X4X4=64种变化,满足所有横竖切换需求。...实际开发过程中,手动调用起来,往往还是很麻烦,所以sdk提供了自动横竖切换的接口,重力感应开关:setGSensorMode。...2、打开重力感应,手机旋转90° 左不动,右边手机逆时针旋转90°,home键朝右 3、打开重力感应,手机旋转180° 左不动,右边手机逆时针旋转180°,home键朝上 4、打开重力感应,手机旋转...180°,home键朝上 7、关闭重力感应,手机旋转270° 左不动,右边手机逆时针旋转270°,home键朝左 四、总结 非特殊需求,您不需要关注通话横竖切换,交给sdk重力感应自动切换即可。...当您是安卓智能设备,采集画面有角度,或者有特殊横需求,可以关闭重力感应,换成全手动调用。参考前篇《TRTC横竖切换1,手动切换》

    1.2K20

    Android监听横竖切换功能

    偶然在项目中用到播放视频时,需要横将视频全屏播放,所以需要监听屏幕的横竖切换事件。 横竖切换监听效果: ?...ConfigChanges,用于捕获手机状态的改变,当横竖切换,屏幕尺寸变化,弹出键盘,系统设置改变等条件,就会触发回调事件onConfigurationChanged。...“mnc“ 移动网号,在一个国家或者地区中,用于区分手机用户的服务商。 “locale“ 所在地区发生变化。 “touchscreen“ 触摸已经改变。...“keyboardHidden“ 用户打开手机硬件键盘 “navigation“ 导航发生了变化。 “orientation“ 横竖切换。...“属性时,切换横竖会调用各个生命周期方法,横调一次,竖调用1次 设置activity的android:configChanges=”orientation|keyboardHidden”时,切换横竖不会调用各个生命周期方法

    2.7K20

    Android 横竖处理的知识小结

    Android 手机一般都支持横竖旋转,系统也会提供一个设置,控制允不允许旋转。这里对如何在 App 中控制界面的旋转方向做一个小结。...(注意一般机器即使用这个值也不会支持竖旋转180度) nosensor : 忽略物理传感器的方向。这将导致用户旋转手机时不会切换横竖。...除非你对横竖切换有自己的一套逻辑,才需要在不同的逻辑下进行不同的设置。 横竖切换时引起的 Activity 重新创建 默认情况下,横竖切换会引起当前 Activity 销毁然后重新创建。...所以我们可以在 Activity 重新创建时根据当前横竖状态做一些差异化。最常见的就是根据横竖采用不同的 layout xml。...阻止横竖切换时 Activity 重启 虽然我们可以用上面的方法对横竖做不同的布局,但是横竖切换导致的 Activity 重新创建还会引起用户当前状态、数据的丢失。

    4.4K40

    Activity横竖切换的那些事

    由设备的物理方向传感器决定,如果用户旋转设备,这屏幕就会横竖切换 nosensor 忽略物理方向传感器,这样就不会随着用户旋转设备而横竖切换了(”unspecified”设置除外) user 用户当前首选的方向... 这样横竖切换的时候不会重新创建...android:configChanges 常用配置 在Android 3.2以后,如果我们进行下列的配置 ,这样的话横竖不会重新创建Activity,但是会调用 onConfigurationChanged...利用系统的加载机制自动帮我们加载相应的布局 如果大家在资源目录res 中添加了 layout-land(横向布局文件夹) 和 layout-port (竖想布局文件夹),重启Activity模式的横竖切换..., 可能有人会有这样的疑问,当我们设置了Activity的方向为竖或者横的时候,旋转屏幕并不会重新调用Activity的各个生命周期,那我们要怎样检测呢?

    2.2K20

    TRTC横竖切换2,重力感应

    一,简介 如前篇文章《TRTC横竖切换1,手动切换》介绍,TRTCSDK提供了三个api,支持手动调整横竖切换,组合起来有4X4X4=64种变化,满足所有横竖切换需求。...实际开发过程中,手动调用起来,往往还是很麻烦,所以sdk提供了自动横竖切换的接口,重力感应开关:setGSensorMode。...2、打开重力感应,手机旋转90° 左不动,右边手机逆时针旋转90°,home键朝右 3、打开重力感应,手机旋转180° 左不动,右边手机逆时针旋转180°,home键朝上 4、打开重力感应,手机旋转...180°,home键朝上 7、关闭重力感应,手机旋转270° 左不动,右边手机逆时针旋转270°,home键朝左 四、总结 非特殊需求,您不需要关注通话横竖切换,交给sdk重力感应自动切换即可。...当您是安卓智能设备,采集画面有角度,或者有特殊横需求,可以关闭重力感应,换成全手动调用。参考前篇《TRTC横竖切换1,手动切换》

    1.4K50

    TRTC横竖切换1,手动切换

    一、简介 本篇主要介绍TRTC通话时,横竖切换接口的调用示例、通话效果。 音视频通话完整链路,大致是:本地采集、本地预览、编码输出、网络传输、接收解码渲染。...用户要的只是4种效果:自己横竖切换+对方看到的横竖切换,但是sdk却有4X4X4=64种实现方式,一旦遇到问题就很费解。以下将引导:用最简单的方式,体验sdk的横竖切换功能。...还有一些手机,平放在桌面时,会发生横竖切换,这是手机重力感应触发的,请把手机支起来吧,或者关闭手机的重力感应。...关于sdk重力感应功能,可以参考这篇《TRTC横竖切换2,重力感应》 3、横后画面裁剪问题 横后画面只显示中间一小部分,看上去放大了。...setRemoteViewFillMode 另外,您也可以同步调整view的横竖比例。 五、下一篇 《TRTC横竖切换2,重力感应》

    2.2K30

    TRTC横竖切换1,手动切换

    一、简介 本篇主要介绍TRTC通话时,横竖切换接口的调用示例、通话效果。 音视频通话完整链路,大致是:本地采集、本地预览、编码输出、网络传输、接收解码渲染。...用户要的只是4种效果:自己横竖切换+对方看到的横竖切换,但是sdk却有4X4X4=64种实现方式,一旦遇到问题就很费解。以下将引导:用最简单的方式,体验sdk的横竖切换功能。...还有一些手机,平放在桌面时,会发生横竖切换,这是手机重力感应触发的,请把手机支起来吧,或者关闭手机的重力感应。...关于sdk重力感应功能,可以参考这篇《TRTC横竖切换2,重力感应》 3、横后画面裁剪问题 横后画面只显示中间一小部分,看上去放大了。...setRemoteViewFillMode 另外,您也可以同步调整view的横竖比例。 五、下一篇 《TRTC横竖切换2,重力感应》

    2K30

    TRTC横竖切换2,重力感应

    一,简介 如前篇文章《TRTC横竖切换》介绍,TRTCSDK提供了三个api,支持手动调整横竖切换,组合起来有4X4X4=64种变化,满足所有横竖切换需求。...实际开发过程中,手动调用起来,往往还是很麻烦,所以sdk提供了自动横竖切换的接口,重力感应开关:setGSensorMode。...-08-36.png 3、打开重力感应,手机旋转180° 左不动,右边手机逆时针旋转180°,home键朝上 Screenshot_2020-09-22-20-09-32.png 4、打开重力感应,手机旋转...非特殊需求,您不需要关注通话横竖切换,交给sdk重力感应自动切换即可。...当您是安卓智能设备,采集画面有角度,或者有特殊横需求,可以关闭重力感应,换成全手动调用。参考前篇《TRTC横竖切换》 链接: 《TRTC横竖切换》

    2.1K115

    Android编程判断横、竖及设置横竖的方法

    本文实例讲述了Android编程判断横、竖及设置横竖的方法。...分享给大家供大家参考,具体如下: 还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许横显示,并且要将该界面的标题隐藏,当切换回竖显示的时候,标题变为可见,一开始我百度了一下有一个监听activity...出现的问题所在,在于onConfigurationChanged监听方法,是在屏幕切换之后才会执行的,当测试人员已横进入的时候,根本就没有进入这个函数进行隐藏操作,而且当横进入的时候,宽度也就是手机的高度...既然知道了问题,那就好办了,下面是解决办法: 当用户从登陆界面登陆之后,设置改界面为竖显示(这一步是为了让悬浮菜单计算弹出的宽度),当执行完之后,再重新设置改界面支持横竖显示,代码如下: /** *...(ActivityInfo.SCREEN_ORIENTATION_SENSOR);//支持横竖 Display display = getWindowManager().getDefaultDisplay

    2.6K30

    js如何判断手机还是竖的方法

    不废话,下面附上几种方法的代码:1.通过在html中分别引用横和竖的样式文件:Markup<link rel="stylesheet" media="all and (orientation:portrait...: portrait ){ //竖<em>屏</em>CSS }@media ( orientation: landscape ){ //横<em>屏</em>CSS }3.<em>js</em>判断是否为横<em>屏</em>竖<em>屏</em>:JavaScriptwindow.addEventListener...; } }, false);4..<em>js</em>判断是否为横<em>屏</em>竖<em>屏</em>JavaScriptfunction orient() { //alert('gete'); if (window.orientation...: 0 或180 竖<em>屏</em>Andriod:0 或180 横<em>屏</em>Andriod: 90 或 -90 竖<em>屏</em>转载于:https://www.jianshu.com/p/43b991eba5e55.当屏幕旋转的时候友情提示...center'; p.innerHTML = '为了您的良好体验'; p.appendChild(br); p.innerHTML += '请将<em>手机</em>

    85330
    领券