目的
開発中のアプリで、iosで文字入力をおこなおうとすると画面全体がピンチインを行うのがうざいし、
他の弊害が出たりして困ったのでその辺の対処
参考↓
https://qiita.com/volkuwabara/items/b285cc312587c73a4812
http://shanabrian.com/web/html-css-js-technics/css-ios-bug-fixed-position-breaks-keyboard-opened.php
ソースコード
textarea {
font-size: 16px;
transform: scale(0.8);
}
<%= f.text_area :body, id:'no-pinch' , class:'frame-none text-white submit-form px-4', placeholder:"入力してください" %>
、
、
、
<script>
$(document).ready(function(){
inputElem = document.querySelector('#no-pinch')
inputElem.addEventListener('focus', function() {
scrollTop = $(window).scrollTop();
$('#bottom-nav').hide();
});
inputElem.addEventListener('blur', function() {
setTimeout(function() {
$('#bottom-nav').show();
}, 200);
});
});
</script>
iosでは16px以下で設定しているとピンチインしてしまうのでこのCSSとjsで対応