关于手机端显示页面一个像素的边框变粗的问题

正常的页面设置了<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1"> 之后 手机端的border细线 及时设置了1px的宽度也会虚化变宽。

如何解决这个问题,最简单的方式是定义border-width: 1px;border-image: url(bg.jpg) 2 repeat;
    其中bg.jpg可以设计成6x6 的 一张图片

搞定。

这样做也有一些劣势 比如圆角怎么解决,另外两个大牛给出了他们的解决方案。

http://www.th7.cn/web/html-css/201505/103090.shtml

http://blog.csdn.net/huang100qi/article/details/47355277

但也有人坑爹的提出,想要真正的1个像素的细线,可以把手机版页面设为

<meta name="viewport" content="width=device-width initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

这样做的后果是,PC版页面完全无法看,字体图片你都要重新设置更大号,而且还不是按比例的,你慢慢调试吧。

时间: 2024-10-14 16:47:45

关于手机端显示页面一个像素的边框变粗的问题的相关文章

简单两步让博客园支持手机端显示

博客园的模板是没有兼容手机端显示的,阅读体验比较差.本文教你如何简单几步让你的博客支持手机端显示.找一个夜深人静,没有人浏览你博客的时间点,开始吧. 1.添加js代码 在博客园后台的“设置”菜单下,有一项页首Html代码,此处写js代码也是可以生效的,将如下代码复制过去: <script> var content = 'width=device-width, initial-scale=1 user-scalable=no'; var viewport = document.createEle

手机端web页面的一些注意事项

1.viewport的写法 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 宽度设为设备宽度(手机屏幕宽度),默认缩放比例设为不缩放,用户是否可手动缩放设为“否” 2.device-width具体是什么呢? 第一代iphone的时候,分辨率为320*480,屏幕尺寸为3.5寸(注意,这个3.5寸说的

iPhone X 适配手机端 H5 页面通用解决方案

一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战. 对于手Q中的各业务来说,受iPhone X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢? 目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone X在状

编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似

1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//

织梦系统-手机端搜索页面跳转到电脑端问题解决方法

使用dedecms最新程序移动版的童鞋如果遇到,手机版搜索结果跳转到的是电脑版搜索结果页面去: 解决方法 移动版模板搜索代码中要带有(下面标红的代码) <form name="formsearch" action="/plus/search.php">    <input type="hidden" name="pagesize" value="15">    <input t

JS判断PC 手机端显示不同的内容

方法一: function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href="手机版地址"; } } else

vue+node开发手机端h5页面开发遇到的坑

一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17px; display: inline-block; border-radius: 5px; height: 18px; line-height: 18px; margin-top: 15px; max-height: 18px; max-width: 90%; white-space:nowrap; text-overflow:ellipsis; over

手机端 html 页面

<!doctype html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=Cache-Control content=no-cache /> <!---重新加载页面 禁止缓存作用 --!&g

手机端H5页面常见问题

1.Android点击图片或按钮和输入框的时候,会有阴影框的效果 解决方法: img,input,button{ -webkit-tap-highlight-color: transparent; }