2017-10-24 3 views
1

나는 내 웹 사이트에서 일해 왔고 Google Pixel 전화에서 홈 화면에 일부 단절된 단어가 있음을 알았다. 그래서 화면 크기가 충분히 커서 전체를 볼 수 없다면 완전히 시도하고 숨기기로 결정했습니다. 참조 용 웹 페이지는 다음과 같습니다. 여기에 웹 사이트에 영향을 미치는 규칙이 있습니다.@media Wordpress에서 재정의하지 말 것.

/* 
 
----Fix for Title Screen on Pixel---- 
 
\t \t \t \t */ 
 
@media screen and (min-width: 481px) and (max-width: 615px) { 
 
.nivo-caption { 
 
\t bottom:25% !important; 
 
} 
 
}

http://manypoint.org/

여기 너무 그 특정 장치의 화면 크기에 무엇을하고 있는지의 스크린 샷입니다. Example

페이지로 이동하여 해당 상자를 검사하면 위에서 게시 한 미디어 규칙이 이미 respondive.css에 있음을 알 수 있습니다. 편집하고 아래쪽으로 돌리면 : 10 % 아래로 : 25 % 내 문제가 해결 된 것을 볼 수 있습니다. 유일한 문제는 해결되지 않고 있습니다. 이 CSS를 마지막 스타일 인 custom.css에 추가하고 custom.css의 맨 아래에 넣습니다. 여전히 효과가 없습니다. 항상 responsive.css의 원래 스타일을 사용합니다. 또한! important 태그로도 아무것도하지 않는 것을 볼 수 있습니다.

이제 어떤 생각을하는지 알았습니다. 반응 형 .ssss 만 편집하십시오. 쉽게 고칠 수 있지만 그 파일에 대한 액세스 권한이 없습니다. 그것도 오지 않아야합니다, 나는 custom.css에서 스타일을 오버라이드 할 수 있어야합니다. 마지막으로로드 되었기 때문입니다. 이 문제를 해결할 수 있도록 내가 여기 어딘가에 잘못되었다고 말해줘!

+0

최소 너비와 최대 너비가 Google 픽셀 크기 내에 있음을 증명할 수 있습니까? 화면 밀도가 @media 규칙을 속일 수 있습니다. – jfeferman

+0

아마도 그렇 겠지만, 화면이 그 크기 일 때이 클래스를 편집 할 수 없다는 여전히 문제가 있습니다. 난 그냥 화면 크기를 앞뒤로 드래그 구글 크롬 검사 도구를 사용하고 있습니다. – Calvissuperman

+0

Chrome 개발자 도구를 사용하면 스타일이 다른 곳에서 대체되고 있는지 확인할 수 있습니다. 선택기의 특이성을 높이려고 할 수 있습니다. – jfeferman

답변

0

방금 ​​시도해 본 결과입니다. 위의 설명에서 나는 특이성을 증가시킬 것을 제안 받았다. 그렇다면 그것은 나에게 타격을주었습니다. 어쩌면 다른 폭 매개 변수를 사용해보십시오.

그건 속임수 였어! 이미 다른 곳에있는 @media 규칙을 직접 무시하는 대신 약간 다른 설명을 추가했습니다. 방금 480px 및 616px 및 비올라로 픽셀 수를 변경했습니다.

이것이 정상적인 동작인지 확실하지는 않지만 확실하게 문제를 해결합니다.

+0

이 버그가해야 할 것 같아요. 망막 디스플레이. 잘 모르겠지만 재미있는 링크가 있습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio retina displays 2px in 더 작은 공간에서 더 높은 해상도를 만드는 공간. – admcfajn

관련 문제