Mobile H5 dynamically set the font-size of the HTML screen bug fixes and horizontal screen tips by Fungleo

Mobile H5 Dynamic Set HTML font-size screen bug fix and horizontal screen tip by Fungleo preface

In the previous mobile app showing the same effect solution on different size phones, we're only thinking about the default vertical screen. Obviously, if the user's phone allows the screen to rotate, the page becomes disgusting in the case of a horizontal screen.

So we need to do a processing to determine whether the browser is a horizontal screen, in the case of a horizontal screen, to use the height value to calculate the HTML font-size.

Code

Because the project introduces jquery, the following code is all jquery syntax.

function htmlFontSize(){    var win = $(window),        winH = win.height(),        winW = win.width(),        hfz;    winW > winH ? hfz = winH : hfz = winW;    $("html").css(‘font-size‘,~~(hfz*100000/36)/100000+"px");}

With the above code, you can correctly display the size of the page in the case of a horizontal screen. However, in the case of horizontal screen, the page will become more strange, should give the user a hint.

Baidu a bit, found a horizontal screen of events and solutions.

function orientationChange() {    if (window.orientation==90 || window.orientation==-90){        alert("横屏下不能获得最佳体验,建议竖屏浏览网页!");    }};

The horizontal screen hint code is as above.

Then, the functions are executed at the right time.

$(function(){    htmlFontSize();    $(window).on("resize",function(){        htmlFontSize();    });    orientationChange();    $(window).on("orientationchange",function(){        orientationChange();    });});

As above. The effect is correct. However, it seems that I used two events a little superfluous. Therefore, you can integrate the code into one event.

$(function(){    htmlFontSize();    orientationChange();    $(window).on("orientationchange",function(){        htmlFontSize();        orientationChange();    });});

It is important to note that the Resize event is very useful when debugging on a PC.

Finally, the two functions can be combined into a single function. There is not much to write about. Because, the leader said the horizontal screen I do the effect is good, do not need to prompt:)

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article starting link. Otherwise, legal liability will be investigated.

Starting Address: http://blog.csdn.net/FungLeo/article/details/51221622

Mobile H5 dynamically set the font-size of the HTML screen bug fixes and horizontal screen tips by Fungleo