viewport | 易学教程

移动端布局知识

阅读更多关于移动端布局知识

关于rem html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px / 一句话理解viewport 视窗 viewport（viewport的功能在于控制你网站的最高块状（block）容器：元素。）推荐使用建议使用jqm，因为你到后面还是会改成jqm搭配Hammer.js来搭建为何要用touch事件代替click事件？ click事件300ms延时 touch事件支持多点触摸手势操作盒子边框溢出当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。推荐使用的移动端UI组件 http://frozenui.github.io/frozenui/demo/ui.html 转载于:https://my.oschina.net/u/1792175/blog/598039 来源： https://blog.csdn.net/chuomu8273/article/details/100682031

手机端+PC端无缝滚动

阅读更多关于手机端+PC端无缝滚动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>墨鱼教育</title> <style> *{ margin: 0; padding: 0; list-style: none; } html,body{ width: 100%; } #wrapper{ width: 100%; height: 200px; overflow: hidden; position: relative; } #wrapper .mainList{ position: absolute; height: 200px; } #wrapper .mainList{ width: 100%; } #wrapper

Verification of Element in Viewport in Selenium

阅读更多关于 Verification of Element in Viewport in Selenium

How to verify whether an element is visible in viewport(visibility of browser) or not using Selenium? I've tried with the below code, but Point object(Y value) returns huge value as page is scrollable. Here am getting element dimensions, location and Dimensions of Browser and comparing them. Dimension weD = element.getSize(); //to get the element Dimensions Point weP = element.getLocation(); // getting the location of the element in the page. Dimension d = driver.manage().window().getSize(); // To get the browser dimensions int x = d.getWidth(); //browser width int y = d.getHeight(); //browser

一篇真正教会你开发移动端页面的文章(二)

阅读更多关于一篇真正教会你开发移动端页面的文章(二)

移动端开发的干货篇之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块：拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body>

移动端页面开发资源总结

阅读更多关于移动端页面开发资源总结

移动端页面开发资源总结及技巧工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 3、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 4、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式

viewport实现html页面动态缩放/meta viewport/viewport

阅读更多关于 viewport实现html页面动态缩放/meta viewport/viewport

本文转载于: 猿2048 网站 viewport实现html页面动态缩放/meta viewport/viewport 页面默认缩放比例为1，最小宽度为375px，在小于375px出现水平滚动条的时候重新计算显示比例缩小界面， <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="utf-8" > < title > viewport </ title > < meta id ="viewport" name ="viewport" content ="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" > < script type ="text/javascript" > var winW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, viewport = document.getElementById( " viewport " ), scale = 1 ; if (winW <= 320 ) { scale = winW / 375.00 ; }

Bootstrap-概述

阅读更多关于 Bootstrap-概述

Bootstrap-概述文件引入移动端优先增强跨浏览器性 v4.3 模板为： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script

Viewport meta tag for iOS devices

阅读更多关于 Viewport meta tag for iOS devices

Does stating <meta name="viewport" content="width=device-width" /> have the same effect as stating <meta name="viewport" content="width=768" /> for the ipad? andreasbovens It depends indeed on the orientation of the device: setting a specific pixel value will cause your layout to be scaled up with a factor of 1.333 to fit inside the 1024px device width when in landscape mode. Setting width=device-width on the other hand will not scale anything up, but change the viewport width, for which you then can craft an optimized layout using media queries. Or that is at least the theory: the iPad

How to check if css value is supported by the browser?

阅读更多关于 How to check if css value is supported by the browser?

问题 Im not very skilled in javascript so please be bear with me. Safari 6 and below and older android mobile browsers and maybe more do not support the css value VH. My DIV#id or class is not the height of the viewport. Below is a link to a page i found some useful information, but im really not sure how to use it with a css value: Check whether a css value is supported Here is the code given as a shortcut for you: if('opacity' in document.body.style) { // do stuff } function isPropertySupported

Bootstrap 2移动设备优先

阅读更多关于 Bootstrap 2移动设备优先

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 Copy <meta name="viewport" content="width=device-width, initial-scale=1"> 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ http://www.maisenyinglun.cn http://www.ovinem.cn http://www.mulanzhichun.cn http://www.huianters.cn http://www.khoty.cn http://www.burkepoohs.cn http

订阅 viewport