embedding h5 pages in andriod will distort the rem, used, but there is no such problem in iOS, and there is also a problem in browsing pages on Android phones. What is the reason for this?
this is the problem in Android:
iOS:
embedding h5 pages in andriod will distort the rem, used, but there is no such problem in iOS, and there is also a problem in browsing pages on Android phones. What is the reason for this?
this is the problem in Android:
iOS:
automatic line wrapping caused by different rendering widths? Do you render your text in Em?
post the html and css of this paragraph
(function(doc, win) {
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //orientationchange
recalc = function() {
var whdef = 12 / 750; // 750,12PX
var wH = window.innerHeight; //
var wW = window.innerWidth; //
var rem = wW * whdef; // ,FONT-SIZE
$('html').css('font-size', rem + "px");
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //
doc.addEventListener('DOMContentLoaded', recalc, false); //
})(document, window)
.share {
position: fixed;
width: 100%;
height: 10.67rem;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: space-around;
bottom: 0;
left: 0;
}
.share>img {
width: 7.9rem;
height: 7.9rem;
margin-left: 3rem;
}
.share_text {
/* margin-left: 1rem; */
font-family: '';
}
.share_name {
font-size: 2.5rem;
color: -sharpfff;
letter-spacing: 0.05rem;
margin-top: 0.1rem;
font-family: '';
line-height: 4rem;
}
.share_sologan {
font-size: 2rem;
color: -sharpfff;
line-height: 4rem;
letter-spacing: 0.05rem;
font-family: '';
}
.load_btn {
display: inline-block;
text-decoration: none;
width: 16rem;
height: 6.67rem;
line-height: 6.67rem;
text-align: center;
font-size: 2.5rem;
color: -sharpfff;
background-color: -sharpa15ff7;
border-radius: 1.67rem;
letter-spacing: 0.08rem;
/* margin-left: 2rem; */
}
html
<div class="share">
<img src="./image/logo.png" alt="">
<div class="share_text">
<p class="share_name">
<p class="share_sologan">,APP!
</div>
<a href="-sharp" class="load_btn"></a>
</div>
Previous: The problem of span centering
Next: React+websocket refresh error report, please give me your advice.
how to detect which permissions are on or off in app ...
...
using Taobao flexible, no matter using 1px or 1px converted rem, it cannot be displayed in the 1px frame of some wide-screen mobile phones. Do you have any better solution? ...
uses AVD manager simulation with android studio. ran normally yesterday and reported an error when running today. Execution failed for task :app:installDebug . > com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. (1)...
input content length control instructions are basically fine on all devices. Why is Meizu incompatible ...
1. Run the H5 project in the Uc browser on the mobile side, and click the button to select the phone to take photos. 2.2 3.MMP 4. Finally, the two images uploaded by the UC browser are the same, but there is no such bug 5 in other browsers. Later, t...
question: 1, data cannot be requested; 2, incorrect style loading ask for advice! ...
currently developing APP, with VUE wants to achieve the effect of Wechat opening external links as shown in the picture (APP embedded with external web pages). Before, I have tried to find a lot of BUG after iframe publishes APP on IOS ....
I wrote a method in methods in vue, which is exposed to Android in mounted, as follows: methods: { outGoodsResult(val){ alert( ceshi ) alert(val) } } mounted () { window.outGoodsResult = self.outGoodsResult } he said it was called, but my...
problem description use the tbs debugging tool according to the official and online methods, but the page of Mini Program does not appear. Other pages opened in Wechat can appear. the platform version of the problem and what methods you have tried ...