FCKeditor编辑的内容怎么能同时适配网站和手机页面

发布网友发布时间：2022-04-23 07:02

我来回答

共1个回答

热心网友时间：2022-04-22 07:35

第一、通过全部前端的方法来适配：

1、在网站的之间增加

意思是，设置你的网页宽度为屏幕宽度，并且禁止手动缩放。具体的详情可以去百度搜索html5 的 viewport。这一个是必须有的。

2、在你的网站样式文件中增加

@media only screen and (max-width: 767px) and (min-width: 480px){适配平板的手机端的样式内容}

@media only screen and (max-width: 480px) {适配手机的样式内容}

什么意思呢，(max-width: 767px) and (min-width: 480px)就是说当你的屏幕最大为767px并且最小为480px的时候使用的内容，max-width: 480px就是在你的屏幕最大为480px时使用的样式。在大括号之间，请把所有不需要显示的网页元素全部display:none，隐藏掉，其他的元素基本都是100%宽度的布局，记住，如果某一个样式无法覆盖掉，那么使用important。

3、使用js让广告适配合适的设备（当然你也可以直接让css来隐藏掉广告，但是js可以让网页的速度快一点，因为不需要去加载web端的广告了）。

用法：

if (is_mobile()) { 手机端的联盟广告代码，例如百度的是：var cpro_id="u2616661";
}else{
web端的广告内容。
}

第二，通过服务器端配合前端来适配手机端，这样做对技术能力有一定的要求，但是会让你的网站变得焕然一新，这里以php为例：

1、使用服务器来抓去浏览器头，检查是否是手机端，下面给一个不错的函数

function is_mobile(){
    // returns true if one of the specified mobile browsers is detected
    $regex_match="/(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|";
    $regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
    $regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
    $regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|";
    $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera*mini|320x320|240x320|176x220";
    $regex_match.=")/i";
    return preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}

使用方法：if( is_mobile()){

手机端的内容，如果不想手机端显示，那么这里留空即可，你可以可以设置只在手机端显示的内容，比如手机端的广告

}else{

web端的内容，如果你只是想web端才能访问，那么在这里写如前端输出的内容

}

在服务器端，把web端才显示的内容都放进else里面，这样当手机端打开网站的时候，就不会显示凌乱了。

2、通过之前说的前端的方法进行设置即可。

全部栏目

FCKeditor编辑的内容怎么能同时适配网站和手机页面