uniapp+Html5 endでPCエンドの適応を実現する。
序文
uniappで作成したh5ページをPC側で表示すると、upxの単位計算の基準値により大きすぎて、ページスケジューリングレイアウトがずれてしまうことが判明した
アイデア
は最初、px単位を使えばページレイアウトが混乱しないことがわかりましたが、これはオープンしたばかりのプロジェクトには優しいし、すでに確立されたプロジェクトで修正するにはコストとリスクが高すぎるし、pxは固定単位なので、モバイルでは明らかにupxに劣るのです。
その後、長い時間のためのBaiduは、そこに解決策は、偶然気まぐれで、あなたは375pxに設定された幅をロードする前にページ内のiframeを使用することができます（750upx）は、欺瞞ブラウザ、欺瞞uniapp達成するために、ブラウザを聞かせて375pxに（この値は必要に応じて自分自身で設定できます）ベンチマーク値は、アップx => px変換比を計算することが判明した。で、setimeout 300ミリ秒（遅延時間は自分でテストしてください、必ずしも300ミリ秒の効果がベストではありません）でiframeの幅を100％に設定し、ベンチマーク値375↑でPC側でページをレンダリングすることができるようにします。
デモは以下の通りです。
pages.json：（プロジェクトトップページのiframe、モバイルかPCかを判断し、PC用の適応処理を行うために使用される）
{
"pages": [
{
"path": "pages/iframe"
},
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationStyle" : "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "DEMO",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
ページ/iframeページ
<style lang="scss">
.container{
height: 100%;
iframe{
display: block;
width: 375px;
height: 100%;
opacity: 0;
animation: fadeShow .3s ease-in forwards .3s;
}
}
@keyframes fadeShow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<template>
<view class="container flex justify-center">
<iframe v-if="!ismobile" :src="url" frameborder="0" :style="'width:'+width"></iframe& gt;
</view>
</template>
<script>
export default {
data() {
return {
url: '',
width: '',
ismobile: true,
};
},
onLoad(opt) {
this.ismobile = this.isMobile();
let url = 'pages/index/index';// your home page
if(this.ismobile){
uni.redirectTo({
url: `/${url}`
})
}else{
this.url = `${location.href}${url}`;
this.width = '375px';
setTimeout(() => {
this.width = '100%';
},300)
}
},
onShow() {
},
methods:{
isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec| wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag?true:false;
}
}
};
</script>
欠陥がある。
f5でページを更新すると、iframeの初期ページに戻ってしまう
2019/11/25に更新しました。
さて、今日、公式コミュニティを見て回ったら、すでに数行のコードでOKのPC側適応方式を提案している神様がいることを知り、ふと、自分が本当にバカであることに気がつきました。
神様のプログラムをベースに以下を修正しました。
pc.jsを新規作成し、適当な場所に置く、内部コードは以下の通り（変数swの値は適当に設定しても良い、以下は私の感覚で設定したもの、8K画面に適応したものです）。
;(function (){
var u = navigator.userAgent,
w = window.innerWidth;
if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf('iPad') > -1) {
var sw = w*576/1920;
window.innerWidth = sw<375?375:sw;
window.onload = function() {
window.innerWidth = w;
}
}
})();
そして、main.jsの中にpc.jsを導入します。
pc.jsは、アプリのインスタンスが導入される前に導入する必要があり、そうでない場合は無効であることに注意してください!!!
import '@/static/js/pc'
import Vue from 'vue'
import App from '. /App'
これには、ページを更新したときに、前のスタックが残っていて、iframeのように更新後にトップページに戻ることがないという利点があります。
私の上記の解決策については、無視してください！ d expect, d expect )
2019/11/26に更新しました。
pc.jsを以下のように変更し、PCスタイルで1upx = 1rpx = 1pxを実現できるようにした。これはデザインの1:1復元に非常に便利である。
もちろん、デザインが1920でない場合、例えば1366の場合、このwindow.innerWidth = 750*(w / 1366)に以下のように変更することである。
;(function (){
var u = navigator.userAgent,
w = window.innerWidth;
if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf('iPad') > -1) {
window.innerWidth = 750*(w / 1920);
window.onload = function() {
window.innerWidth = w;
}
}
})();
この記事はuniapp + Html5 endでPC適応を実現することを紹介しています、もっと関連するHtml5 PC適応コンテンツはスクリプトハウス過去記事を検索するか、次の関連記事を引き続き閲覧してください、今後ともスクリプトハウスを応援してください！。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン