SegmentFault 手机网页的问题
2024-01-29T17:56:53+08:00
https://segmentfault.com/feeds/tag/手机网页
https://creativecommons.org/licenses/by-nc-nd/4.0/
手机网页版如何选择技术实现方式?
https://segmentfault.com/q/1010000044599238
2024-01-29T17:56:53+08:00
2024-01-29T17:56:53+08:00
StringString
https://segmentfault.com/u/stringstring
0
<p>app 部分页面需要手机网页版,如何实现好?</p><p>比如需要 文章页面<br>m.domain.com/post/10043</p><p>我考虑了三种方案:</p><h3>1</h3><p>我打算通过 nginx 配置,解析 request post/10043 到 src/pages/post/view.html,js 获取内容并输入结果到页面。尽量减少使用前端库。</p><h3>2</h3><p>采用 vue 单页应用。通过 vue router。但是我担心以后如果需要更多的页面,打包下来,加载的内容会过多,影响加载速度,毕竟是手机访问。</p><h3>3</h3><p>php 渲染模板。前端复杂的页面,再引入 js</p><p>这种情况,怎么设计合适呢?我觉得这三种都不太好。求大神指导。</p><p>还没尝试,只是思考了一下这三种方案。</p>
同一个手机页面在安卓和苹果手机上打开位置为何不同?
https://segmentfault.com/q/1010000012895721
2018-01-18T19:49:58+08:00
2018-01-18T19:49:58+08:00
xzzz
https://segmentfault.com/u/xzzz_5a2f8aa46f140
0
<p>如图,同一个页面,加的居中属性。<br>苹果手机:<img src="/img/bV2gUv?w=418&h=191" alt="图片描述" title="图片描述"></p>
<p>安卓手机:<img src="/img/bV2gUA?w=418&h=202" alt="图片描述" title="图片描述"></p>
<p>如何让页面的内容在两种手机上都为居中显示?<br>还有,代码中就是写的居中,苹果手机页面为什么会发生偏移?</p>
<p>这是在苹果手机上按住<code>input</code>出现的阴影:<img src="/img/bV2gVs?w=418&h=204" alt="图片描述" title="图片描述"></p>
<p>很明显的看到大了一块,为什么<code>div</code>和<code>input</code>设置的同样的宽度在手机上展示时会变大?<br>百思不得姐,就解惑,蟹蟹!</p>
<hr>
<p><code>css</code>代码:</p>
<pre><code>#hengpi {
width: 120px;
height: 36px;
border: none;
background: rgba(0, 0, 0, 0);
outline: none;
color: #fff;
font-size: 22px;
text-align: center;
font-family: myfont;
}
.hengpi_img {
text-align: center;
background: url(images/hengpi.png) no-repeat;
background-size: 100%;
width: 120px;
margin: 0 auto;
}</code></pre>
<p><code>html</code>代码:</p>
<pre><code><div class="hengpi_img">
<input type="text" maxlength="4" id="hengpi" value="哈哈哈哈" onfocus="this.blur();" />
</div></code></pre>
手机web页面上传视频,iphone上传的视频格式是mov,能不能在前端控制,录制视频的时候转码MP4
https://segmentfault.com/q/1010000009292346
2017-05-04T16:57:42+08:00
2017-05-04T16:57:42+08:00
柯林斯
https://segmentfault.com/u/kelinsi
0
<p>手机web页面上传视频,iphone上传的视频格式是mov,能不能在前端控制,录制视频的时候转码MP4</p>
HTML5移动端开发都有那些技巧或者黑科技?
https://segmentfault.com/q/1010000006032909
2016-07-21T16:30:30+08:00
2016-07-21T16:30:30+08:00
安静的木马
https://segmentfault.com/u/anjingdemuma
0
<p>移动端的开发,无论是wap站还是为app开发H5页面,适配,兼容,调试都有那些成熟的,流行的技巧呢?<br>我先来抛砖引玉:<br><strong>写less或sass,使用autoprefixer加兼容前缀,使用flex加媒体查询做弹性布局,使用fiddler做远程调试,具体就是利用Autoresponder做文件映射。</strong><br><img src="/img/bVsQzS" alt="clipboard.png" title="clipboard.png"><br>技术大牛们,你们开发移动端都有那些小技巧或黑科技,一起讨论分享一下吧。</p>
chrome 手机端开发是,添加手机设备怎么填长宽?
https://segmentfault.com/q/1010000005964440
2016-07-14T14:46:41+08:00
2016-07-14T14:46:41+08:00
蓝with黑
https://segmentfault.com/u/lanwithhei
1
<p>必须小米note 5.7寸 1920*1080的屏幕,怎么自定义这个长宽?<br><img src="/img/bVzbMu" alt="clipboard.png" title="clipboard.png"></p>
怎么制作使用flex制作可自适应的web页面??
https://segmentfault.com/q/1010000005361877
2016-05-27T16:03:45+08:00
2016-05-27T16:03:45+08:00
灰色v碰触
https://segmentfault.com/u/diary
0
<p>想使用flex制作这种可自适应的布局(用在手机页面):</p>
<p><img src="/img/bVwE1F" alt="clipboard.png" title="clipboard.png"></p>
<p>我仿照着写了,效果如下:</p>
<p><img src="/img/bVwE1M" alt="clipboard.png" title="clipboard.png"></p>
<p>对应的代码:</p>
<pre><code><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style>
body,div{margin:auto;padding:0px;position:relative;}
.wfr_con{border:5px solid red;max-width:640px;width:100%;min-height:100px;max-height:300px;margin-top:20px;display:flex;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;flex-flow:row wrap;-webkit-flex-flow:row wrap;align-items:stretch;-webkit-align-items:stretch;box-sizing:border-box;zoom:1;}
.wfr_con>div{margin:0px;width:0px;height:100%;flex:1 1 auto;-webkit-flex:1 1 auto;}
.wfr_left{}
.wfr_left a{width:100%;height:100%;display:inline-block;}
.wfr_left a img{width:100%;height:100%;}
.flex_two{border:3px solid green;height:100%;display:flex;flex-flow:column wrap !important;-webkit-flex-flow:column wrap !important;justify-content:flex-start;-webkit-justify-content:flex-start;align-items:stretch;-webkit-align-items:stretch;}
.flex_two a{width:100%;height:50%;flex:1 1 auto;}
.flex_two a img{width:100%;height:100%;}
</style>
<div class='wfr_con'>
<div class='wfr_left'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_03small_06_20165261143C4D.jpg' /></a>
</div>
<div class='wfr_right'>
<div class='flex_two'>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_01small_02_20165261143DDB.jpg' /></a>
<a href='javascript:void(0);'><img src='http://img1.gamersky.com/image2016/05/20160526_ll_136_6/gamersky_02small_04_20165261143563.jpg' /></a>
</div>
</div>
</div>
</body>
</html>
</code></pre>
<p>重点出现这种现象的原因,我没有在最外层容器元素上设置固定的高度(使用的是:min-height,max-height),才导致出现这种现象。</p>
<p>我想要知道为什么设置min-height,max-height 后,子元素为什么就无法继承父元素的高度了呢??</p>
<p>然后就是,怎么解决这个问题,实现我想要的效果(第一张图显示的布局)??</p>
说说制作手机端页面的思路??
https://segmentfault.com/q/1010000005342055
2016-05-25T12:14:42+08:00
2016-05-25T12:14:42+08:00
灰色v碰触
https://segmentfault.com/u/diary
0
<p>能否拿一些著名网站(例如天猫,京东商城之类的) 他们的制作思路是怎样的??</p>
<p>我主要担心的问题是:屏幕尺寸不同 , 该怎样进行制作??</p>
<p>响应式(利用 @media screen and (max-width) 进行设计) ?? <br>还是全部百分比设置(中间插入一些 flex 布局)??</p>
<p>或者,有没有其他的可选方案??</p>
<p>能否给个简单的范例:<br> 例如:推荐 响应式</p>
<pre><code> 响应式范例:
<style>
@media screen and (min-width: 480px) and (max-width:640px){
div{width:560px;font-size:14px;}
}
</style>
<div></div>
</code></pre>
<p>本人手机端页面制作小白,求科普相关技术....,谢谢</p>
手机h5 页面 iPhone 下 手机号码 蓝色字体
https://segmentfault.com/q/1010000004350519
2016-01-22T13:46:12+08:00
2016-01-22T13:46:12+08:00
夕君
https://segmentfault.com/u/xijun
0
<p>在手机端 苹果系统下 手机号码会变成蓝色的 ,如何不让手机号变成蓝色 , 苹果真是的</p>
<p><img src="/img/bVspVl" alt="图片描述" title="图片描述"></p>
<h3>html</h3>
<pre><code><nav class="nav">
<h6 class="myTitle">我的信息</h6>
<div class="myInfo">
<p>手机号 : <span class="myPhone">15000003499</span></p>
</div>
<div class="myLout">
<a href="javascript:void(0);">切换账户</a>
</div>
</nav></code></pre>
<h2>scss</h2>
<pre><code>.myInfo{
padding: 0 10px;
.myPhone{
color: #FFF;
text-decoration: none;
}
}</code></pre>
HTML5移动端网页如何入手?有哪些资源?
https://segmentfault.com/q/1010000004136116
2015-12-12T12:22:28+08:00
2015-12-12T12:22:28+08:00
嘉瑜猫在路上
https://segmentfault.com/u/syveen
0
<p>想学一下移动端HTML5网页的开发,应该掌握哪些技术,有哪些资源?JS, CSS, html4这些都会,html5和移动开发一直没接触过,自己在网上找了一圈,有点蒙圈,如果只是入门,比如要做一个html5经典的移动端网站的话,应该学习哪些?<br>html5, bootstrap, angularJS?</p>
手机网页开发 一行字显示不完 怎么左滑显示剩余的文字?
https://segmentfault.com/q/1010000003745442
2015-09-14T16:04:03+08:00
2015-09-14T16:04:03+08:00
shannon
https://segmentfault.com/u/whichpro
0
<p><img src="/img/bVpSvN" alt="图片描述" title="图片描述"></p>
<p>css</p>
<pre><code>*{margin:0;padding:0;}
body{background: #EFEFF4;}
.m10{
margin: 10px;
background: #fff;
line-height: 28px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
font-size: 14px;
}</code></pre>
<p>html</p>
<pre><code><div class="m10">新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计。</div></code></pre>
<p>请问怎么通过js实现在321的屏幕下,通过手指向左滑动,显示剩余的隐藏文字应该怎么做呢(滑动到最右端右能左滑回来)?<br>或许甚至不需要js?手机端js小白一枚,求教了。</p>
小白求教:我直接做了一个html页面 电脑浏览很正常,手机浏览发现整个页面都缩小了
https://segmentfault.com/q/1010000003030389
2015-07-29T11:25:29+08:00
2015-07-29T11:25:29+08:00
go696
https://segmentfault.com/u/go696
0
<p>小白求教:我直接做了一个html页面 电脑浏览很正常,手机浏览发现整个页面都缩小了</p>
<p>我主要想做一个手机访问的网页,请问如何制作适合手机浏览的html网页</p>
<p>我想过通过填充整个页面的方式,但是网上复制过来的代码都有问题。</p>
<p>求解决!!</p>