기준이 1920인 width: 500px; 를 vw로 변경 할 경우
:root {
--vw-base: 1920;
}
.foo {
width: calc(500 * 100vw / var(--vw-base));
}수원 화성
WordPress REST API posts 목록에 댓글 카운트 추가하기
WordPress의 기본 REST API중 posts에는 따로 댓글의 카운트를 따로 뽑아주는 기능이 없어 검색해보니..
역시나 누군가 만들어둔게 있어 퍼옵니다.
WordPress /wp-content/themes/{사용 테마} 폴더의 functions.php에 추가후 확인
// https://stackoverflow.com/a/60048982
add_action( 'rest_api_init', function() {
register_rest_field( 'post', 'comment_count', [
'get_callback' => function ( $post ) {
return (int) wp_count_comments( $post['id'] )->approved;
},
'schema' => [
'description' => 'List number of comments attached to this post.',
'type' => 'integer',
],
] );
});IOS 키보드 체크
const listener = () => {
const MIN_KEYBOARD_HEIGHT = 300
const isMobile = window.innerWidth < 768
const isKeyboardOpen = isMobile && window.screen.height - MIN_KEYBOARD_HEIGHT > window.visualViewport.height
document.documentElement.classList.toggle('show-keyboard', isKeyboardOpen)
}
window.visualViewport.addEventListener('resize', listener)Android 4.* native `audio` and `video` controls bug
android 4.*버전의 android 브라우저에서 -webkit-appearance사용시 video태그의 기본 컨트롤의 스타일이 무너지는 현상
html 셀렉터를 이용하여 해결필요
[css]
html input[type="button"] {
-webkit-appearance: none
}
[/css]
안드로이드 pointer-events 버그
몇몇 안드로이드에서 touchstart 같은 touch전용 이벤트가 걸린 엘리먼트 위에 pointer-events: none;가 걸린 엘리먼트를 위에 띄울경우 touch이벤트가 안먹는 문제가 발생.