解决android手机网页缩放之后,光标变细的问题

在android中,当采用meta缩放屏幕的时候,会导致光标变细

<meta name="viewport" content="width=device-width, initial-scale=0.5, shrink-to-fit=no, user-scalable=0, viewport-fit=cover">

采用缩放是为更好的采用1像素,避免1px太粗,这种方案非常何时移动端,这里不过多描述。

如图:

处理之后的结果:

解决方案:

假设缩放了ratio倍,则需要放大ratio倍

transform: scale(ratio),当然同时宽高也要处理,可能代价不较大,但至少可以解决。

input{

  box-sizing:content-box;

  color:inherit;

  border:none;

  text-indent:0.5em;

  transform-origin:left top;

  line-height:1;

  background-color:transparent;

  //// 0.18 0.12

padding: 0.06rem 0.04rem;

width: 33.33333%;

transform: scale(3);

// 0.15rem

font-size: 0.05rem;

height: 0.05rem;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,062评论 0 9
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,207评论 0 11
  • 人物:流浪剑客(行走江湖三十余年,突闻全家三十六口尽数被杀,逃难中) 小沙弥(佛殿守护) 佛像(存世千年,许每一位...
    墨小凝阅读 539评论 2 3
  • 刚到家,看了一下表,22:05!累!从早晨6:50起床到现在好像一直在忙,围绕着我的宝贝妞! 昨天就预见到今日的忙...
    蓝尘爱俏阅读 247评论 0 2
  • 谭小姐 我翻开你写的信 泛黄的字迹 曾经无忧花开的你 谭小姐 我听到轻声的叹息 你说起了往昔 关于他的 曾让你哭泣...
    桂先生_1993阅读 160评论 0 0