js实现pc网页等比缩放到移动端(h5)展示

pc网页在手机端预览时,会存在样式混款,横向滚动,此时我们想让pc的网页等比缩小到移动端展示网页,直接加以下js就好啦:

<script>
/***
 *判断屏幕大小更改网页缩放比例
 */
function initScreen() {
  var viewport = document.querySelector("meta[name=viewport]");
  if(!viewport){
    $("head").append('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">')
  }
  if(!document.querySelector("meta[http-equiv]")){
    $("head").append('<meta http-equiv="X-UA-Compatible" content="ie=edge">')
  }
  var viewport = document.querySelector("meta[name=viewport]");
  var winWidth = $(window).width();
  var size = winWidth / 1200;
  if (winWidth < 480) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes');
    $("html").css({"transform":"scale("+size+")","transform-origin":"0 0",'width':'1200px',"height":"100vh"});
  }
}
$(function(){
  initScreen()
})
</script>

meta默认设置就是会在移动端等比缩放展示的。

默认设置meta在移动端就会缩放:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">不允许缩放
  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图形的等比缩放和拖拽可以使用 C# 的 WinForms 控件和图形绘制功能来完成。以下是一个简单的示例代码: ```csharp using System.Drawing; using System.Windows.Forms; public partial class Form1 : Form { private bool isDragging; private Point lastPoint; private Image image; private float scale = 1.0f; public Form1() { InitializeComponent(); // 加载图像 image = Image.FromFile("image.jpg"); // 设置窗体大小和图像大小一致 this.ClientSize = image.Size; } private void Form1_Paint(object sender, PaintEventArgs e) { // 绘制图像 e.Graphics.DrawImage(image, 0, 0, image.Width * scale, image.Height * scale); } private void Form1_MouseDown(object sender, MouseEventArgs e) { // 鼠标左键按下开始拖拽 if (e.Button == MouseButtons.Left) { isDragging = true; lastPoint = e.Location; } } private void Form1_MouseMove(object sender, MouseEventArgs e) { // 拖拽中更新图像位置 if (isDragging) { int dx = e.Location.X - lastPoint.X; int dy = e.Location.Y - lastPoint.Y; this.Location = new Point(this.Location.X + dx, this.Location.Y + dy); lastPoint = e.Location; } } private void Form1_MouseUp(object sender, MouseEventArgs e) { // 鼠标左键松开结束拖拽 if (e.Button == MouseButtons.Left) { isDragging = false; } } private void Form1_MouseWheel(object sender, MouseEventArgs e) { // 鼠标滚轮改变图像缩放比例 if (e.Delta > 0) { scale *= 1.1f; } else if (e.Delta < 0) { scale /= 1.1f; } // 限制缩放比例在 0.1 到 10 之间 scale = Math.Max(scale, 0.1f); scale = Math.Min(scale, 10.0f); // 刷新窗体以显示缩放后的图像 this.Invalidate(); } } ``` 在这个示例中,我们使用了 `Image` 类来加载图像,使用 `Graphics` 类的 `DrawImage` 方法来绘制图像,使用窗体的鼠标事件来实现拖拽和缩放。在缩放时,我们使用了 `MouseWheel` 事件来捕获鼠标滚轮事件,并使用缩放比例来调整图像大小。注意,我们需要在 `Paint` 事件中重新绘制图像以显示缩放后的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值