Absrtact: It is expected that over the next year or two, mobile terminals will surpass PC Internet users. This is not what I said, but from Sina CEO Cao Chao's mouth. Of course, I also agree with his point of view, in the boring commute on the road, in the leadership of the meeting,
"It is expected that over the next year or two, mobile terminals will surpass PC Internet users." "This is not what I said, but from Sina CEO Cao Chao's mouth." Of course, I also agree with his point of view, in the boring commute, in the leadership of the meeting talk, even sitting on the toilet stool, mobile terminal devices have become a replacement for computers anytime and anywhere to connect to the Internet the best tool. The most popular mobile terminals are the same as Apple's iphone, ITouch and IPad, which means that if your site can provide a better user experience on these mobile terminals, it's likely to win more markets.
This article will take the IPhone as an example to introduce how to personalize your WordPress blog on many mobile devices. With the iphone's children's shoes, you may want to use the iphone browser Safari to browse the site, look at the Computer browser and see how different?
Ha, yes, as shown in the picture, the left and right two is the home page optimization before and after the optimization comparison. Before the optimization of the iphone to browse the site is basically the same as seen on the computer, and in the iphone after optimization browsing this site can see a single column of the page. Compared to computer monitors, mobile displays are small, to show the user the most important content in the limited display is kingly, so I put the sidebar, the carousel map, advertising, the top of the toolbar, the comments section, and so the gaudy things to hide, this is how to do it?
In fact, because we know the IPhone display resolution is 480px, it is only necessary for this width of the device to define a separate style, and the common CSS introduction method is similar, there are two methods:
1, for the IPhone to introduce a separate new CSS file (I did it)
Put this in the header.php head style.css after the introduction of the file can be.
2, directly in the style.css modification, the iphone under the style definition written in the style.css in the end.
@media only screen and (max-device-width:480px) {
. foriphone{
/* Style for IPhone
}
}
@media only screen and (max-device-width:480px) This is CSS3, so you want to use the IPhone under the other button browser, UCWEB and other goods to try, this method only for Safari and other standard browser effective.
This method is just a throw brick, there are more magical play, such as you to develop, such as how to optimize the display of WordPress on the IPad? Of course, this aspect is not only applied to WordPress, all the users and Web sites that support CSS3 browsers can achieve this function, try try it ~