问题
I have a web application that targets various devices including iPad 1,2,3. I use jQuery mobile to customize the UI. I have a a jquery mobile . The image inside the checkbox is the 'home' and the 'search' image in iPad 3. It should have been the 'checked' and the 'unchecked' image however, like the way it works in iPad 1 and 2. The resolution of iPad 3 is not the same as iPad 1 and 2 which is why this happens. So how can I fix this having a common solution for all devices?
回答1:
I found an answer to this.
In jquery mobile css there is a separate style for HD Retina. There you will find
-moz-background-size: 864px 18px;
-o-background-size: 864px 18px;
-webkit-background-size: 864px 18px;
background-size: 864px 18px;
Change the 864 to 776px. According to background image rules, the size specified here should half of the actual image. The actual image is 1552px. So half of this 776px. But jquery mobile code says 864, which is wrong.
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px; is the correct code.
FYI: https://github.com/jquery/jquery-mobile/issues/2224
来源：https://stackoverflow.com/questions/16453714/why-arent-jquery-mobile-icons-clipped-properly-in-high-resolution-devices