手机浏览器和pc浏览器的width:100%的自适应问题

最新推荐文章于 2022-12-02 02:35:57 发布
最新推荐文章于 2022-12-02 02:35:57 发布
阅读量1.2w 收藏 2
点赞数 1
分类专栏： CSS3 
最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；

到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。

可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以在 head 标签中初始化好 viewport。

 

详见下方代码：

<metaname="viewport"content="width=网页真实宽度, initial-scale=倍数值"/> 
假设网页宽度为 960px 或 1080px，可在width中加入该值，并将 initial-scale 设置一个适合的倍数值。

例如一个页面的宽度为 1080px，则设定为：

<metaname="viewport"content="width=1080, initial-scale=0.9"/> 
这样不管加载前后切换横屏还是竖屏，都可以友好显示。【可参考：股票配资 手机端与pc端的浏览对比 】
 

可是比如头部部分设置为width：100%，而网页中部最大宽度为默认：1200px，头部和中部长度不一致。这个问题在pc端和手机的默认像素不一致造成。该如和解决？
 

 

找了很多资料，终于找出来了：
 

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度:


 
 

  
  

   
   

    
    [html] 
    
    view plain
    
    copy
    
    在CODE上查看代码片
    
    派生到我的代码片
    
    

    
    

   
   

  
  

  
  
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />     
  2. <meta name="apple-mobile-web-app-capable" content="yes" />    
  3. <meta name="format-detection" content="telephone=no" />    

 
 

第一行：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
第二行：
设定iphone端页面全屏。
第三行：
取消数字被识别为电话号码。

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

 
 

  
  

   
   

    
    [html] 
    
    view plain
    
    copy
    
    在CODE上查看代码片
    
    派生到我的代码片
    
    

    
    

   
   

  
  

  
  
  1. <meta name="viewport" content="width=device-width（这里是可以变化的，根据你的其他div的宽度来设置）, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />    

 
 

这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。【要把width=device-width 中的device-width换成你中部设置的像素值，比如我的设置为1200px】 这样问题就解决了。

                

        

    

  



    



                



	

		

			

				
					
web前段设计之痛：手机浏览器和pc浏览器的width:100%的自适应问题

				
			

			

				

					网站运营
				

				

					01-22
					
					7790
					
				

			

		

		

			
				
Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式，在 Mac 中的 Safari 浏览器 同样开启开发者模式后，进行联机调试。功能彪悍。

最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；

到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始

			
		

	



                

            
              



	

		

			

				
					
JS/JQ 实现无视系统和浏览器的缩放比例改为固定缩放比例

				
			

			

				

					weixin_43852260的博客
				

				

					11-19
					
					7367
					
				

			

		

		

			
				
最近用笔记本做了一个网页，笔记本的系统缩放比是125%，浏览器是100%。





但是客户用的是台式机，客户的系统和浏览器的缩放比例都是100%，这个页面在100%会很丑，而且这个页面是为了全屏设计的，客户想不全屏的时候也能展示全所有信息。因此想尽可能少的改造代码就想到了zoom缩放。



zoom缩放的原理是：

1、先获取系统✖浏览器的缩放比例： 

window.devicePixelRatio;//假设系统缩放是100%，浏览器是100%,这个值就是1✖1=1

2、调整缩放：

...

			
		

	



              


  
              

                


	

		

			

				
					
html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...

				
			

			

				

					weixin_30131185的博客
				

				

					06-16
					
					399
					
				

			

		

		

			
				
因为网站设计时就不是针对1024分辨率的, 现在如果重做工作量巨大(和重做整个平台差不多了)现在发现chrome 75% 缩放效果和期望效果几乎一样.所以有没有什么方法可以实现这效果?js或css的都可以, 浏览器只考虑chrome回答：最后用electron打包了一个客户端搞定了. electron 的 BrowserWindow.webPreferences.zoomFactor 属性和chr...

			
		

	





	

		

			

				
					
设置了宽度为 100% 却并没有显示出100% 的宽度

				
			

			

				

					hst_gogogo的博客
				

				

					05-05
					
					3729
					
				

			

		

		

			
				
问题描述：设置了nav的宽度为100%，但却没有显示出100%的宽度。html 布局如下：&lt;div class="wholepage"&gt;
&lt;div class="top"&gt;...&lt;/top&gt;
&lt;div class="nav"&gt;...&lt;/div&gt;
&lt;/div&gt;样式表如下：.wholep

			
		

	



		

			
		



	

		

			

				
					
网页要让它自适应各种手机屏幕宽度大小要怎么设置

				
			

			

				

					Yan 小铁匠
				

				

					08-09
					
					1088
					
				

			

		

		

			
				
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaque...

			
		

	





	

		

			

				
					
一套web代码自适应pc端以及手机端的几种解决方法

				
			

			

				

					烤地瓜的博客
				

				

					01-15
					
					3万+
					
				

			

		

		

			
				
最近遇到一个很棘手的项目，自作聪明想使用自己的一套方法自适应手机端和PC端，造成了不小错误，特地从网上学习了一下，现在把学习到的跟大家分享一下
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备...

			
		

	





	

		

			

				
					
JS控制网页文字大小，使其能够自适应屏幕大小

				
			

			

				

					空白_回忆的博客
				

				

					03-25
					
					8655
					
				

			

		

		

			
				
JS监听浏览器文字大小代码【有志网:woyouzhi.com！发现更好的自己！每天给你坚持下去的动力！】<script type="text/javascript">
            //JS监听浏览器文字大小代码
            (function (doc, win) {
                var docEl = doc.documentElement,

			
		

	





	

		

			

				
					
HTML像素随着浏览器大小改变,jQuery实现HTML元素随着浏览器窗口大小变化而动态变化...

				
			

			

				

					weixin_36354351的博客
				

				

					06-03
					
					1361
					
				

			

		

		

			
				
随着扁平化的流行，我们的网页往往变得更加简单和清晰，但虽然简单，在就在技术上和对开发者的要求上并没有变得简单，反而是变得更加搞的要求；因为整体简单了，就不能让其中有任何瑕疵，让一切都得看上去是精致的。而今天这个解决方案也是基于这样一种需求而来的，虽然标题上是用jQuery来做，实际上原生的JS也能做到；当然用JS的这个框架可能开发效率会更高一点，于是我们下面就以jQuery为例子吧。那今天这个需求...

			
		

	





	

		

			

				
					
HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

					
热门推荐

				
			

			

				

					码农翻身的博客
				

				

					10-16
					
					20万+
					
				

			

		

		

			
				
@media与@media screen两者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。

			
		

	





	

		

			

				
					
HTML怎么跟随页面缩放,如何让网页跟着 浏览器全比例缩小(示例代码)

				
			

			

				

					weixin_29301059的博客
				

				

					06-03
					
					3万+
					
				

			

		

		

			
				
需求今天帮朋友做个小网页,但一直没明白对方的需求;原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例"未满足需求时满足需求之前,登陆框的 margin-top 以及 margin-left 的值用的都是精确px(像素值);整体页面css(审查元素)把浏览器窗口缩小会发现"登陆框"会因为"margin-left:1000px"的原因留在它固有的位置,从而看不到它,自然也...

			
		

	





	

		

			

				
					
移动端页面宽度100%时右侧留白边的问题

				
			

			

				

					boKeB1
				

				

					04-29
					
					8562
					
				

			

		

		

			
				
改好之后再退回去也出不来白边了，下次遇到再截图吧

加了这句
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

白边就不见了，原因大概是 html 手机默认的100%宽度是980px。

...

			
		

	





	

		

			

				
					
前端移动端适配 - 媒体查询适配方案

				
			

			

				

					超逸の学习技术博客
				

				

					02-10
					
					3746
					
				

			

		

		

			
				
工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找样式以及命名规范等问题够折磨一整天了。

			
		

	





	

		

			

				
					
聊一聊移动端适配

				
			

			

				

					csdn_chuan的博客
				

				

					12-02
					
					836
					
				

			

		

		

			
				
移动web开发在当下很常见，今天我们就聊聊里面牵涉的一些技术点。

			
		

	





	

		

			

				
					
html手机端背景显示不全,手机浏览器打开PC端网站，背景显示不全怎么办？

				
			

			

				

					weixin_30387211的博客
				

				

					06-22
					
					3411
					
				

			

		

		

			
				
原标题：手机浏览器打开PC端网站，背景显示不全怎么办？随着移动互联网的发展，大多数企业在制作网站的时候，为了兼容各种设备，会制作出PC端、移动端二种版，根据不同的设备跳转到不同的网站，从而实现用户体验最优化。那么，问题来了，笔者遇到一个问题，有个企业老网站之前通过DIV+CSS布局的。电脑端打开网站布局排版都正常。当用手机打开其电脑版的网站时，只要涉及背景的代码，在手机浏览器上显示不完整，出现混乱...

			
		

	





	

		

			

				
					
uniapp中width:100%，height:100%不生效

				
			

			

				

					千禧皓月的博客
				

				

					02-15
					
					3985
					
				

			

		

		

			
				
用vh和vw作单位

1.vw ：(Viewport Width)相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。

2.vh：(Viewport Height)相对于视口的高度， 视口被均分为 100 单位的vh，1vh等于视口高度的1%。


width:100vw;

height:100vh;






...

			
		

	





	

		

			

				
					
手机web页面制作一些注意事项

				
			

			

				

					my blog
				

				

					10-13
					
					193
					
				

			

		

		

			
				
 
 
原文：
http://hi.baidu.com/onionsmm/item/977b8142e64b9b12886d10ea
一、关于手机页面的标准头
字符编码使用utf-8

指定页面手机内存缓存中的存储时间段

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimu...

			
		

	





	

		

			

				
					
关于当前safari对于calc()的样式兼容问题

				
			

			

				

					qq_42926749的博客
				

				

					02-03
					
					1353
					
				

			

		

		

			
				
遇到一个情况，就是一个输入框，原本是left: calc(50% - XXXpx)居中，hover时变成left: calc(50% - YYYpx)，给了个transition，但是在safari浏览器下频繁hover的时候，样式不是平滑的变化。
后用以下方案解决问题：
.XXX {
	left: 50%;
	transform: translateX(-50%);
}

问题可能是safari在calc()计算时逻辑导致，直接用transform来进行位移可以解决

...

			
		

	





	

		

			

				
					
电脑端页面在手机端缩放展示

				
			

			

				

					qq_44104321的博客
				

				

					10-13
					
					531
					
				

			

		

		

			
				
<metaname="viewport"content="width=device-width,intial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">


			
		

	





	

		

			

				
					
移动端PC端自适应和兼容问题

					
最新发布

				
			

			

				

					03-17
				

			

		

		

			
				
<think>好的，我现在需要解决用户关于移动端和PC端自适应与兼容性的问题。用户提到的关键词包括响应式设计、浏览器差异、CSS媒体查询、HTML布局技巧等。首先，我应该先理解用户的具体需求，他们希望网站在不同设备上都能良好显示，同时处理浏览器兼容性问题。

根据系统指令，我需要使用中文回答，并确保行内数学表达式正确使用$...$，独立公式用$$...$$。不过在这个问题中可能数学公式较少，但需要留意是否有需要的地方。然后要生成相关问题，并在回答中正确引用提供的资料。

用户提供的引用资料有两个，引用[1]提到了使用媒体查询实现响应式网页，使用rem和vw进行移动端适配。引用[2]详细说明了CSS3媒体查询的作用和弹性布局的局限性，强调媒体查询的重要性。我需要整合这些信息，给出解决方案。

首先，响应式设计的核心是媒体查询，根据不同的屏幕宽度应用不同的样式。比如在PC端（如1920px）和移动端（如768px以下）设置不同的布局。然后，移动端适配可以用rem或vw单位，结合flexible.js或者直接使用viewport设置。兼容性方面，需要考虑不同浏览器的CSS前缀，使用Autoprefixer工具自动添加。布局技巧方面，弹性盒子（Flexbox）和网格布局（Grid）是基础，但要处理旧版浏览器的兼容问题。

接下来，需要结构清晰，分步骤说明解决方案。可能的结构包括：媒体查询的应用、移动端适配方案、浏览器兼容性处理、布局技巧、图片与媒体适配、测试方法等。每个部分都需要结合引用内容，例如在媒体查询部分引用[1]和[2]，在rem和vw部分引用[1]。

然后，生成相关问题，需要围绕响应式设计、移动端适配技术、浏览器兼容性工具、布局方法等。比如如何选择rem和vw，如何处理IE兼容，测试工具推荐等。

需要确保回答正确，没有错误信息。比如rem是基于根字体大小，而vw是视口宽度的百分比，flexible.js的作用是动态调整根字体大小。同时，Autoprefixer的作用是自动添加浏览器前缀，避免手动处理。测试方面，使用浏览器开发者工具和真实设备测试。

可能需要注意的点：在提到媒体查询时，举例正确的断点值，如max-width: 768px。在布局技巧中，说明Flexbox和Grid的适用场景。在兼容性处理中，提到polyfill的使用，如html5shiv和respond.js。图片适配方面，使用srcset和sizes属性，以及object-fit属性。

最后，检查是否所有引用都正确标注，例如引用[1]和引用[2]在适当的位置。确保没有遗漏用户的问题点，覆盖所有提到的关键词：自适应、兼容性、解决方案、响应式设计、浏览器差异、CSS媒体查询、HTML布局技巧。</think>### 移动端与PC端自适应及兼容性解决方案

#### 1. **响应式设计的核心：CSS媒体查询**
通过定义不同屏幕宽度的样式规则，实现布局自动适配。例如：
```css
/* PC端（宽度≥1200px） */
@media (min-width: 1200px) {
  .container { max-width: 1200px; }
}

/* 移动端（宽度≤768px） */
@media (max-width: 768px) {
  .nav { display: none; }
}
```
媒体查询是响应式设计的基石，可针对屏幕方向、分辨率等条件调整布局[^2]。

#### 2. **移动端适配方案**
- **rem + flexible.js**  
  通过动态设置根字体大小（如1rem = 75px），配合flexible.js实现等比缩放。例如：
  ```css
  html { font-size: 75px; } /* 设计稿宽度750px时 */
  .box { width: 1rem; } /* 实际显示75px */
  ```
- **vw单位**  
  直接使用视口宽度百分比（1vw = 1%视口宽度），无需JS依赖：
  ```css
  .box { width: 50vw; } /* 占据屏幕宽度50% */
  ```
  引用[1]指出这两种方法均可有效解决移动端适配问题。

#### 3. **浏览器兼容性处理**
- **CSS前缀自动化**  
  使用构建工具（如Webpack）搭配`Autoprefixer`插件，自动添加`-webkit-`、`-moz-`等前缀。
- **渐进增强策略**  
  优先保证基础功能在所有浏览器可用，再通过特性检测（如`@supports`）增强高级特性：
  ```css
  @supports (display: grid) {
    .container { display: grid; }
  }
  ```

#### 4. **HTML布局技巧**
- **弹性盒子（Flexbox）**  
  适合一维布局，解决元素对齐与空间分配问题：
  ```css
  .container {
    display: flex;
    justify-content: space-between;
  }
  ```
- **网格布局（CSS Grid）**  
  实现复杂二维布局，需注意IE11部分支持：
  ```css
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  ```

#### 5. **图片与媒体适配**
- **响应式图片**  
  使用`srcset`和`sizes`属性适配不同分辨率：
  ```html
  <img src="small.jpg" 
       srcset="medium.jpg 1000w, large.jpg 2000w"
       sizes="(max-width: 768px) 100vw, 50vw">
  ```
- **视频容器**  
  通过`padding-top`实现等比缩放：
  ```css
  .video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9比例 */
  }
  ```

#### 6. **测试与验证**
- 使用Chrome开发者工具的**设备模式**模拟不同分辨率
- 通过**BrowserStack**测试真实设备兼容性
- 用`npm outdated`检查polyfill库（如`html5shiv`、`respond.js`）的版本更新

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值