h5頁面禁止複製 H5移動端頁面禁止複製技巧

2021-10-13 11:48:39 字數 948 閱讀 7718

前言:業務需要,需要對整個頁面禁止彈出複製選單。

在禁止的頁面中加入以下css樣式定義

-webkit-touch-callout:none;/*系統預設選單被禁用*/

-webkit-user-select:none;/*webkit瀏覽器*/

-khtml-user-select:none;/*早起瀏覽器*/

-moz-user-select:none;/*火狐瀏覽器*/

-ms-user-select:none;/*ie瀏覽器*/

user-select:none;/*使用者是否能夠選中文字*/

還需加入以下js

//pc端 使右鍵和複製失效

document.oncontextmenu = new function("event.returnvalue=false");

document.onselectstart = new function("event.returnvalue=false");

//ios

document.oncontextmenu = function (e) {

e.preventdefault();

document.onselectstart = function (e) {

e.preventdefault();

//安卓

document.addeventlistener('contextmenu', function (e) {

e.preventdefault();

document.ontouchend = function () {

throw new error("no errpr:禁止長按彈出");

實測 ios禁止呼出複製選單有效。但在安卓上還無法全部禁止。

安卓uc瀏覽器上還需加入以下**,可以禁止長按撥出選單:

安卓qq瀏覽器暫時沒有找到禁止呼出複製選單的方法.

h5頁面的寫法 移動端h5頁面寫法

1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...

移動端h5頁面適配

一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正 先來看看很多資料上面的描述 它是物理概念,指的是裝置中使用的...

移動端H5頁面適配

廢話不多說,直接上 以下例子均以ui設計圖為750px寬度作為標準進行轉換 1.rem加js適配 用原生方法獲取使用者設定的瀏覽器的字型大小 相容ie 心。該醫院初期主要研究女性性反應方面問題,後逐漸將女性盆骨健康問題和如何提高性功能也作為院內主要診療專案。醫院憑藉精湛的手術技術和出色的手術效果,在...