分类目录归档:Web

Ios 中 关于 WebApp 的 meta 标签

随着webapp 开发越来越多, 开发中的坑也越来越多的被人们发现了,呵呵,这个时候 mate中关于填坑的这些设置就变得比较有用了!下面是ios的坑的填法,记下来,以备使用!

apple-mobile-web-app-capable

设置Web应用是否以全屏模式运行。

语法:
<meta name=”apple-mobile-web-app-capable” content=”yes”>
说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性:
iOS 2.1 +

apple-mobile-web-app-status-bar-style

设置Web App的状态栏(屏幕顶部栏)的样式

语法:
<meta name=”apple-mobile-web-app-status-bar-style” content=”blank”>
说明:

除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank- translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据 下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面 20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

兼容性
iOS 2.1 +

format-detection

启动或禁用自动识别页面中的电话号码。

语法:
<meta name=”format-detection” content=”telephone=no”>
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
兼容性
iOS 1.0 +

viewport

语法:
<meta name=”viewport” content=”width=230,initial-scale=2.3,user-scalable=no”>
说明:

使用viewport meta标签可以提升页面在设备上的表现效果,典型地,你可以设置视口(viewport)的宽度和初始缩放比例。

举个例子来说,如果页面的宽度小于980px,你可以设置视口的宽度以适应页面。如果你正在开发一款Web应用,你应该设置视口的宽度为设备的宽度。

表 1 描述了viewport meta标签支持的属性以及它们的默认值。当有多个属性时,应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则:

  • 不要使用分号作为分隔符。
  • 空格也可以作为分隔符,但最好使用逗号。
  • 对于属性值是数字的属性,如果属性值包含了非数字字符但是以数字开头,那么只有数字的部分被当做属性值。例如,1.0x等价于1.0,123×456等价于123。如果参数不以数字开头,则属性值为0。

当要用到设备的尺寸数据时,你可以使用表2中的常量替代数字值。例如,使用device-width替代320(宽度),用device-height替代480(高度)。

你不需要设置每一个属性,未设置的属性会自动采用默认值。

设置视口的宽度为设备的宽度:

<meta name=”viewport” content=”width=device-width”>

设置初始缩放比例为1.0:

<meta name=”viewport” content=”initial-scale=1.0″>

设置初始缩放比例,同时禁止用户缩放。

<meta name=”viewport” content=”initial-scale=2.3, user-scalable=no”>

兼容性
iOS 1.0 +
表 1 Viewport 属性
属性 描述
width 视口的宽度。默认值是980,取值范围是200至10000,也可以取值为常量device-width。
height 视口的高度。默认值是根据width的值和设备的宽高比来计算,取值范围是223至10000,也可以取值为常量device-height。
initial-scale 视口的初始缩放比例。默认值取决于页面充满屏幕的缩放比例,取值范围取决于minimum-scale和maximum-scale。
minimum-scale 视口的最小缩放比例。默认值是0.25,取值范围是>0至10.0。
maximum-scale 视口的最大缩放比例。默认值是5.0,取值范围是>0至10.0。
user-scable 设置用户是否可以缩放视口。yes表示可以,no表示不能,默认值是yes。设置user-scable为no可以防止当用户在input标签的文本域中输入文本时页面发生滚动。
表 2 特殊的viewport属性值
属性值 描述
device-width 设备的宽度(像素)。
device-height 设备的高度(像素)。

解决 nginx 下 Ecshop 后台登录不了bug

 

最近,升级了朋友服务器 (LNMP),nginx 也跟着升级了,但是升级之后,发现,朋友的 ecshop 登录不了了。现象是,输入错误的密码,报告正常,输入正确的密码,就刷新一下,又回到了登录页面。

仔细观察,发现,页面是跳转到了index.php的,只是因为网速快,一下就又跳回来了,感觉只是刷新下,没有变化,呵呵100M宽带也能带来不少麻烦 ((*^__^*) 嘻嘻……)。

结果查看源码,发现了了问题是出在 https 安全登录检测上的。

在文件 includes/cls_ecshop.php  156 行左右有如下代码

    /**
     * 获得 ECSHOP 当前环境的 HTTP 协议方式
     *
     * @access  public
     *
     * @return  void
     */
    function http()
    {
        return (isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) != 'off')) ? 'http://' : 'http://';
    }

因为检测 isset($_SERVER['HTTPS']) 是 true 而且 里面的值是空,不为off;所以返回了 https

为什么 更新了 nginx 之后就这样呢,大家可以看下nginx的配置文件。

/etc/nginx/fastcgi_params

fastcgi_param	QUERY_STRING		$query_string;
fastcgi_param	REQUEST_METHOD		$request_method;
fastcgi_param	CONTENT_TYPE		$content_type;
fastcgi_param	CONTENT_LENGTH		$content_length;

fastcgi_param	SCRIPT_FILENAME		$request_filename;
fastcgi_param	SCRIPT_NAME		$fastcgi_script_name;
fastcgi_param	REQUEST_URI		$request_uri;
fastcgi_param	DOCUMENT_URI		$document_uri;
fastcgi_param	DOCUMENT_ROOT		$document_root;
fastcgi_param	SERVER_PROTOCOL		$server_protocol;

fastcgi_param	GATEWAY_INTERFACE	CGI/1.1;
fastcgi_param	SERVER_SOFTWARE		nginx/$nginx_version;

fastcgi_param	REMOTE_ADDR		$remote_addr;
fastcgi_param	REMOTE_PORT		$remote_port;
fastcgi_param	SERVER_ADDR		$server_addr;
fastcgi_param	SERVER_PORT		$server_port;
fastcgi_param	SERVER_NAME		$server_name;

#因为下面这项配置,导致了,https是一定会被设置的,如果你不想修改ecshop,又刚好有权限修改配置文件,可以把这个给注视了
fastcgi_param	HTTPS			$https;

# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param	REDIRECT_STATUS		200;

而朋友的ecshop不是在https上工作的,是在http上的,所以,就不停的跳到了登录页面,更详细信息的,可以再百度下。

关于IE6、7、8下实现盒阴影的几个注意点

通常,我们实现盒阴影都是通过这段代码来实现的

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

但是,IE6、7、8不认识这段样式,所以我们会考虑用滤镜来实现这功能

/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

其实如果要求不是那么苛刻的话,IE下用滤镜已经能达到我们要的效果了。当然,如果你觉得滤镜不那么完美,非要用图片去实现,那也可以,就不用继续往下读我要说明的几个注意点了。

首先,滤镜里的颜色属性必须写完整,不能用缩写。比如#000000不能写成#000,不然就会出现这样的效果

  而且,不管你用什么颜色的缩写,都会变成这样,哪怕你写成#fff,最终效果也会是这样。

第二,滤镜的阴影是计算在宽高内的。比如我的盒子宽高都是100px,当我设置阴影的宽度为4px的时候,实际我盒子的宽度和高度就都变成了104px

第三,在盒阴影下,box会自动加上overflow:hidden。

  

作者:胡尐睿丶

来源:http://www.cnblogs.com/hooray/archive/2011/11/22/2258240.html