search

evrone / postcss-px-to-viewport

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
https://evrone.com/postcss-px-viewport
MIT License
3.07k stars 405 forks source link

Mobile keyboard and `landscape: true` 在手机端浏览器弹出输入法后会被识别成横屏 #38

Open tianyuxiaoyao opened 5 years ago

tianyuxiaoyao commented 5 years ago

手机浏览器弹出输入法后，屏幕可视高度缩小，在一些手机上，屏幕宽度大于高度导致ui变形；有什么好的解决方法么

tianyuxiaoyao commented 5 years ago

是否可以传参控制max-width

KODerFunk commented 5 years ago

@tianyuxiaoyao 请举一个例子。 1）您的原始CSS代码 2）结果代码 3）设置

chang986 commented 5 years ago

@tianyuxiaoyao +1，landscape的判断条件是可视区的宽度大于高度生效，一些手机机制是弹出软键盘会压缩可视区高度，很容易导致触发横屏效果。 期望可以支持超出某个width时触发landscapeWidth

chang986 commented 5 years ago

弃用了，issue都不带有人理的

lzm0x219 commented 5 years ago

On Thu, Nov 7, 2019 at 11:02 Carr C notifications@github.com wrote:

弃用了，issue都不带有人理的

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/evrone/postcss-px-to-viewport/issues/38?email_source=notifications&email_token=AMAUEE5YMY7LG25KT22XQILQSOAMJA5CNFSM4I2J5SI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDIYBRY#issuecomment-550600903, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMAUEEZV66XKR577GVH6FKLQSOAMJANCNFSM4I2J5SIQ .

人家让你给代码和配置，你们没有给出来，怎么责怪作者呢

KODerFunk commented 4 years ago

@tianyuxiaoyao, @from2014, @vvni, @NickeyLin, I realized problem.

Please do some sketching images and show plugin settings so that I can understand how to solve this problem.

tong233 commented 4 years ago

@KODerFunk when the phone keyboard height occupies a lot of screen height. my plugin settings：

       {
          unitToConvert: 'rpx', // (String) 需要转换的单位
          viewportWidth: 750, // (String) 需要转换的单位，默认为"px"
          propList: ['*', '!font*'], // (Array) 将不转换font-size以及font-weight等属性
          viewportUnit: 'vw', // (String) 希望使用的视口单位
          selectorBlackList: ['.ignore', '.hairlines'], // (Array) 需要忽略的CSS选择器
          minPixelValue: 1, // (Number) 设置最小的转换数值
          exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
          landscape: true, // 支持横屏
          landscapeUnit: 'vw', // (String) 横屏时使用的单位
          landscapeWidth: 1136, // (Number) 横屏时使用的视口宽度
        }

css

  background: linear-gradient(180deg, #ff7126 0%, #ff2626 8%, #ff9500 100%);
  width: 750rpx;
  margin: 0 auto;
  min-height: 100vh;
企业微信截图_e5b2c6f3-68d8-4f11-9008-9f85572b4b75
KODerFunk commented 4 years ago

@tong233 thanks for a great example! I am trying to write a test for this problem and solve it.

flydoing commented 4 years ago

这个问题有处理方法了么？我在安卓小米note手机上出现同样的问题

BlackEyeByLee commented 4 years ago

这个问题有处理方法了么？我在安卓小米note手机上出现同样的问题

同机型出现问题

flydoing commented 4 years ago

这个问题有处理方法了么？我在安卓小米note手机上出现同样的问题

同机型出现问题 我的处理方法：

该文件下：node_modules\postcss-px-to-viewport\index.js

// var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' }); // 注释掉这一行 // 比率：小米note手机弹起键盘时，被识别为横屏；增加屏幕宽度/高度的比率判断 var landscapeRoot = new postcss.atRule({ params: '(min-aspect-ratio: 400/375) and (orientation: landscape)', name: 'media' }); // 增加这一行