How to debug the CSS style double image background and css double on the puqing Screen

How to debug the CSS style double image background and css double on the puqing Screen

Tucao:

As more and more people install B, especially some product managers.

Now I am also changing my laptop. Apple's laptop is also a powerful tool for B (especially the pro of retina ).

Recently, I met a colleague's project. I still cut the image as usual and carefully focused on pixels.

All tests are normal and can be launched smoothly.

However, after the launch, the product manager said there was a BUG.

BUG description:(Not considered as a BUG)

The icons on the front-end page are virtual.

Environment:MacBook pro retina screen

Symptom:

A

The icon is virtual.

BUG fixing requirements:

Modify the icon so that the logo on the retina screen is still clear.

Analysis:

All those who have done mobile pages here know that there is no double figure.

Solution:

Step 1: Let the designer double the corresponding icon

Step 2: Use the css media query to adapt to the retina screen.

@ Media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5 ), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {/* the corresponding icons are compatible! */}

Step 3: add the corresponding icon style and view the effect in the browser.

After completing the three steps above, this small adaptation is complete.

Pain points:

However, in normal working environments, no one is configured with an apple, at least not in our company.

Debugging is inevitable when the repair process is small, which requires frequent use of the machine.

The machine is hard to find. You can only use other methods.

Let's take a look at the adapted media query code above.

DervicePixelRatio, this attribute,

In chrome, you can use window. dervicePixelRatio to view the corresponding page values.

Retina's macbook pro is 2.0

Pqing is 1.0

Method 1:

In this case, you can use chrome's mobile terminal simulation function to view the settings of the double graph.

The settings are as follows:

Add a new device.

The configuration mainly involves the device pixel ratio. The value must be greater than the minimum device-pixel-ratio set in your css.

Click this option when testing the page.

The following figure shows the page style.

We can see that the double style is successfully read.

Advantages:

1. The height of the mobile page is the same as that of the Mobile Page.

2. You do not need to find a dedicated HD retina screen device.

Disadvantages:

1. The differences between a doubled image and a double image cannot be compared visually.

2. The principles related to testing and products cannot be explained.

 

Method 2:

Press ctrl + scroll on the scroll wheel, or press ctrl + 'to enlarge the browser's view to more than 150%.

At this time, you can enter

window.devicePixelRatio1.5

I found that the devicePixelRatio is 1.5.

You can also read more than 1.5 of the applicable code.

But at this time, if there are double adaption and none, we can clearly see the comparison.

Advantages:

1. The method is more intuitive. It can reproduce the visual perception on the retina screen and reproduce the description of the above bug.

2. Explanations for products and tests

3. Low equipment requirements. Common computers can be used for development and debugging.

Disadvantages:

1. The page is scaled up and rolled out. The whole page cannot be displayed completely.

 

Summary:

The hardware of the device is getting better and better. You may need to design double icons in the future.

For high-level designers, you can design vector graphs (less than the IE version)

You can also directly use the font as an icon (all versions are supported, but the problem of continuous blurring may also occur)

Think about how many pages have been adapted before, and the workload is huge, opening Pandora box.